/*
 * Trip page Map view + trip-level typography/density.
 *
 * `triplist-map.css` loads on every TripList template visit (see
 * dnd_scripts() in functions.php). Map/sidebar/switcher rules apply
 * when Map mode exists; the opening "Trip page density" block scales
 * hero, search, filters, grid cards, etc. Leaflet assets remain gated
 * to the map feature allow-list.
 */

/* -------------------------------------------------------------------- */
/* Trip page density — readable, spacious (Airbnb / Apple Maps–ish)      */
/* Loaded on all TripList template views. Desktop search inputs bump    */
/* past 16px only at min-width 769px so iOS stays zoom-stable on narrow */
/* viewports (see inline #inline-search-input rule in template).        */
/* -------------------------------------------------------------------- */

body.page-template-template-triplist-php,
body.page-template-template-triplist,
body.page-template-templatestemplate-triplist-php {
	-webkit-font-smoothing: antialiased;
}

@media (min-width: 769px) {
	body.page-template-template-triplist-php #inline-search-input,
	body.page-template-templatestemplate-triplist-php #inline-search-input,
	body.page-template-template-triplist #inline-search-input {
		font-size: 18px !important;
		line-height: 1.35 !important;
	}
	body.page-template-template-triplist-php #inline-search-input::placeholder,
	body.page-template-templatestemplate-triplist-php #inline-search-input::placeholder,
	body.page-template-template-triplist #inline-search-input::placeholder {
		font-size: 18px !important;
	}
}

body.page-template-template-triplist-php .triplist-title,
body.page-template-templatestemplate-triplist-php .triplist-title,
body.page-template-template-triplist .triplist-title {
	font-size: clamp(1.65rem, 2.1vw, 2.25rem) !important;
	font-weight: 800 !important;
	line-height: 1.12 !important;
	letter-spacing: -0.02em;
}

body.page-template-template-triplist-php .triplist-header .dnd-logged-profile-back p,
body.page-template-templatestemplate-triplist-php .triplist-header .dnd-logged-profile-back p,
body.page-template-template-triplist .triplist-header .dnd-logged-profile-back p {
	font-size: 1rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
}

body.page-template-template-triplist-php .triplist-header .profile-header-actions .edit-playlist-toggle p,
body.page-template-templatestemplate-triplist-php .triplist-header .profile-header-actions .edit-playlist-toggle p,
body.page-template-template-triplist-php .triplist-header .profile-header-actions .share-playlist-pop p,
body.page-template-templatestemplate-triplist-php .triplist-header .profile-header-actions .share-playlist-pop p,
body.page-template-template-triplist-php .triplist-header .profile-header-actions .upload-video-btn p,
body.page-template-templatestemplate-triplist-php .triplist-header .profile-header-actions .upload-video-btn p,
body.page-template-template-triplist .triplist-header .profile-header-actions .edit-playlist-toggle p,
body.page-template-template-triplist .triplist-header .profile-header-actions .share-playlist-pop p,
body.page-template-template-triplist .triplist-header .profile-header-actions .upload-video-btn p {
	font-size: 1rem !important;
	font-weight: 600 !important;
}

@media (min-width: 769px) {
	body.page-template-template-triplist-php .triplist-header,
	body.page-template-templatestemplate-triplist-php .triplist-header,
	body.page-template-template-triplist .triplist-header {
		min-height: 400px !important;
	}
	/* Breathing room between the trip title and the Edit / Share
	   pill row — on desktop the actions sit in normal document
	   flow (the floating-icon layout is mobile-only). */
	body.page-template-template-triplist-php .triplist-header .profile-header-actions,
	body.page-template-templatestemplate-triplist-php .triplist-header .profile-header-actions,
	body.page-template-template-triplist .triplist-header .profile-header-actions {
		margin-top: 20px !important;
		margin-left: 0 !important;
	}
	body.page-template-template-triplist-php .triplist-header .profile-header-actions .edit-playlist-toggle,
	body.page-template-templatestemplate-triplist-php .triplist-header .profile-header-actions .edit-playlist-toggle,
	body.page-template-template-triplist-php .triplist-header .profile-header-actions .share-playlist-pop,
	body.page-template-templatestemplate-triplist-php .triplist-header .profile-header-actions .share-playlist-pop,
	body.page-template-template-triplist-php .triplist-header .profile-header-actions .upload-video-btn,
	body.page-template-templatestemplate-triplist-php .triplist-header .profile-header-actions .upload-video-btn,
	body.page-template-template-triplist .triplist-header .profile-header-actions .edit-playlist-toggle,
	body.page-template-template-triplist .triplist-header .profile-header-actions .share-playlist-pop,
	body.page-template-template-triplist .triplist-header .profile-header-actions .upload-video-btn {
		min-height: 48px !important;
		padding: 12px 22px !important;
	}
}

body.page-template-template-triplist-php .find-on-dnd-section,
body.page-template-templatestemplate-triplist-php .find-on-dnd-section,
body.page-template-template-triplist .find-on-dnd-section {
	margin-top: 26px !important;
	margin-bottom: 26px !important;
}

/* Trip page top bar — search + bulk add inline on the left; filter + map on the right */
.triplist-top-controls {
	width: 100%;
	box-sizing: border-box;
}

.triplist-top-controls .find-on-dnd-section {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

.triplist-top-controls__primary {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	min-width: 0;
}

.triplist-top-controls__search-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.triplist-top-controls__search-icon {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	opacity: 0.5;
	pointer-events: none;
}

body.page-template-template-triplist-php #inline-search-input,
body.page-template-templatestemplate-triplist-php #inline-search-input,
body.page-template-template-triplist #inline-search-input {
	width: 100%;
	padding: 15px 18px 15px 45px;
	border: 2px solid rgba(12, 184, 223, 0.85);
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	box-sizing: border-box;
	outline: none;
	box-shadow: 0 0 0 1px rgba(12, 184, 223, 0.15);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.page-template-template-triplist-php #inline-search-input::placeholder,
body.page-template-templatestemplate-triplist-php #inline-search-input::placeholder,
body.page-template-template-triplist #inline-search-input::placeholder {
	color: rgba(255, 255, 255, 0.75);
	font-weight: 600;
}

body.page-template-template-triplist-php #inline-search-input:focus,
body.page-template-templatestemplate-triplist-php #inline-search-input:focus,
body.page-template-template-triplist #inline-search-input:focus {
	border-color: rgba(12, 184, 223, 1);
	box-shadow: 0 0 0 3px rgba(12, 184, 223, 0.22);
}

.triplist-top-controls__bulk-btn,
body.page-template-template-triplist-php #toggle-bulk-add-btn,
body.page-template-templatestemplate-triplist-php #toggle-bulk-add-btn,
body.page-template-template-triplist #toggle-bulk-add-btn {
	flex: 0 0 auto;
	padding: 14px 22px;
	/* Solid brand blue so the Add (bulk) entry point stands out. */
	background: #0cb8df;
	border: 1px solid #0cb8df;
	border-radius: 999px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	box-sizing: border-box;
}

@media (min-width: 769px) {
	body.page-template-template-triplist-php .triplist-top-controls,
	body.page-template-templatestemplate-triplist-php .triplist-top-controls,
	body.page-template-template-triplist .triplist-top-controls {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 12px;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
		margin-top: 20px;
		margin-bottom: 14px;
		box-sizing: border-box;
	}

	body.page-template-template-triplist-php .triplist-top-controls .find-on-dnd-section,
	body.page-template-templatestemplate-triplist-php .triplist-top-controls .find-on-dnd-section,
	body.page-template-template-triplist .triplist-top-controls .find-on-dnd-section {
		flex: none;
		width: 100%;
		min-width: 0;
		max-width: none;
	}

	body.page-template-template-triplist-php .triplist-top-controls .triplist-place-filter-wrap--toolbar,
	body.page-template-templatestemplate-triplist-php .triplist-top-controls .triplist-place-filter-wrap--toolbar,
	body.page-template-template-triplist .triplist-top-controls .triplist-place-filter-wrap--toolbar {
		flex: none;
		width: 100%;
		min-width: 0;
		margin: 0 !important;
		gap: 0 !important;
	}

	body.page-template-template-triplist-php .triplist-top-controls .triplist-place-filter-toolbar,
	body.page-template-templatestemplate-triplist-php .triplist-top-controls .triplist-place-filter-toolbar,
	body.page-template-template-triplist .triplist-top-controls .triplist-place-filter-toolbar {
		width: 100% !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 12px !important;
		min-width: 0;
	}

	body.page-template-template-triplist-php .triplist-top-controls .triplist-view-switcher,
	body.page-template-templatestemplate-triplist-php .triplist-top-controls .triplist-view-switcher,
	body.page-template-template-triplist .triplist-top-controls .triplist-view-switcher {
		margin-left: auto !important;
	}

	body.page-template-template-triplist-php .triplist-top-controls .triplist-place-filter-chips-panel,
	body.page-template-templatestemplate-triplist-php .triplist-top-controls .triplist-place-filter-chips-panel,
	body.page-template-template-triplist .triplist-top-controls .triplist-place-filter-chips-panel {
		flex: 0 0 100%;
		width: 100%;
	}

	body.page-template-template-triplist-php .triplist-top-controls:not(:has(.find-on-dnd-section)) .triplist-place-filter-wrap--toolbar,
	body.page-template-templatestemplate-triplist-php .triplist-top-controls:not(:has(.find-on-dnd-section)) .triplist-place-filter-wrap--toolbar,
	body.page-template-template-triplist .triplist-top-controls:not(:has(.find-on-dnd-section)) .triplist-place-filter-wrap--toolbar {
		flex: 1 1 100%;
	}
}

@media (max-width: 768px) {
	body.page-template-template-triplist-php .triplist-top-controls,
	body.page-template-templatestemplate-triplist-php .triplist-top-controls,
	body.page-template-template-triplist .triplist-top-controls {
		display: block;
		margin-top: 12px;
		margin-bottom: 8px;
	}

	body.page-template-template-triplist-php .triplist-top-controls .find-on-dnd-section,
	body.page-template-templatestemplate-triplist-php .triplist-top-controls .find-on-dnd-section,
	body.page-template-template-triplist .triplist-top-controls .find-on-dnd-section {
		margin-bottom: 8px !important;
	}
}

body.page-template-template-triplist-php .triplist-place-filter-wrap--toolbar,
body.page-template-templatestemplate-triplist-php .triplist-place-filter-wrap--toolbar,
body.page-template-template-triplist .triplist-place-filter-wrap--toolbar {
	gap: 14px !important;
}

body.page-template-template-triplist-php .triplist-place-filter-toolbar,
body.page-template-templatestemplate-triplist-php .triplist-place-filter-toolbar,
body.page-template-template-triplist .triplist-place-filter-toolbar {
	gap: 14px !important;
}

body.page-template-template-triplist-php .triplist-place-filter-toggle,
body.page-template-templatestemplate-triplist-php .triplist-place-filter-toggle,
body.page-template-template-triplist .triplist-place-filter-toggle {
	font-size: 1.1rem !important;
	font-weight: 600 !important;
	padding: 12px 22px !important;
}

body.page-template-template-triplist-php .triplist-place-filter-chips,
body.page-template-templatestemplate-triplist-php .triplist-place-filter-chips,
body.page-template-template-triplist .triplist-place-filter-chips {
	gap: 10px !important;
	padding: 12px 16px !important;
}

body.page-template-template-triplist-php .triplist-place-chip,
body.page-template-templatestemplate-triplist-php .triplist-place-chip,
body.page-template-template-triplist .triplist-place-chip {
	font-size: 1rem !important;
	font-weight: 600 !important;
	padding: 10px 20px !important;
}

body.page-template-template-triplist-php #toggle-bulk-add-btn,
body.page-template-templatestemplate-triplist-php #toggle-bulk-add-btn,
body.page-template-template-triplist #toggle-bulk-add-btn {
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	padding: 12px 22px !important;
	min-height: 48px !important;
}

body.page-template-template-triplist-php .inline-search-google-section-title,
body.page-template-templatestemplate-triplist-php .inline-search-google-section-title,
body.page-template-template-triplist .inline-search-google-section-title {
	font-size: 0.95rem !important;
}

body.page-template-template-triplist-php .inline-search-google-row .google-row-title,
body.page-template-templatestemplate-triplist-php .inline-search-google-row .google-row-title,
body.page-template-template-triplist .inline-search-google-row .google-row-title {
	font-size: 1.05rem !important;
}

body.page-template-template-triplist-php .inline-search-google-row .google-row-address,
body.page-template-templatestemplate-triplist-php .inline-search-google-row .google-row-address,
body.page-template-template-triplist .inline-search-google-row .google-row-address {
	font-size: 0.95rem !important;
	line-height: 1.45 !important;
}

/* Grid / list cards — titles and meta read larger without changing layout engine */
body.page-template-template-triplist-php .triplist-content-grid .video-title,
body.page-template-templatestemplate-triplist-php .triplist-content-grid .video-title,
body.page-template-template-triplist .triplist-content-grid .video-title {
	font-size: clamp(1.05rem, 1.05rem + 0.2vw, 1.2rem) !important;
	font-weight: 800 !important;
	line-height: 1.28 !important;
}

body.page-template-template-triplist-php .triplist-content-grid .video-sub-title,
body.page-template-templatestemplate-triplist-php .triplist-content-grid .video-sub-title,
body.page-template-template-triplist .triplist-content-grid .video-sub-title {
	font-size: 0.98rem !important;
	line-height: 1.45 !important;
	opacity: 0.92;
}

/* -------------------------------------------------------------------- */
/* 3-mode view switcher (List | Grid | Map)                              */
/* -------------------------------------------------------------------- */

.triplist-view-switcher {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px;
	margin: 0;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	flex-shrink: 0;
	touch-action: manipulation;
	position: relative;
	z-index: 20;
	pointer-events: auto;
}

.triplist-view-switcher__btn {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.65);
	width: 46px;
	height: 42px;
	padding: 0;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease, transform 160ms ease;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.triplist-view-switcher__btn:hover {
	color: #fff;
}

.triplist-view-switcher__btn:focus-visible {
	outline: 2px solid #0CB8DF;
	outline-offset: 2px;
}

.triplist-view-switcher__btn.is-active {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.triplist-view-switcher__btn svg {
	width: 23px;
	height: 23px;
	display: block;
	pointer-events: none;
}

.triplist-view-switcher__btn--map {
	width: auto;
	min-width: 46px;
	padding: 0 14px;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.triplist-view-switcher__map-label {
	line-height: 1;
	pointer-events: none;
}

@media (max-width: 380px) {
	.triplist-view-switcher__btn--map {
		padding: 0 10px;
		font-size: 14px;
	}
}

/* The List segment is only useful on narrow viewports where the
   single-column stack is the dominant reading mode. On desktop Grid
   already gives a comfortable multi-column layout that supersedes
   List, so we hide the List segment there to keep the switcher to
   the two views (Grid / Map) that actually differ at that size. */
@media (min-width: 769px) {
	.triplist-view-switcher__btn[data-triplist-view-mode="list"] {
		display: none;
	}
}

/* -------------------------------------------------------------------- */
/* Map container                                                         */
/* -------------------------------------------------------------------- */

.triplist-map {
	margin-top: 22px;
	width: 100%;
}

.triplist-map[hidden] {
	display: none !important;
}

.triplist-map__shell {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 65vh;
	min-height: 440px;
	border-radius: 20px;
	overflow: hidden;
	background: #04141b;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

/* Desktop: true split-screen — map is the hero; leave breathing room for
   masthead + search toolbar via calc(100dvh − offset). */
@media (min-width: 769px) {
	.triplist-map__shell {
		height: min(90vh, calc(100dvh - 88px));
		min-height: 820px;
		border-radius: 22px;
	}
}

@media (max-width: 768px) {
	.triplist-map__shell {
		min-height: min(70svh, calc(100svh - 240px));
		border-radius: 16px;
	}
}

/* The canvas-wrap is the local positioning context for the absolute
   Leaflet canvas + loader + empty overlay. On desktop it sits next to
   the sidebar; on mobile it spans the full shell. */
.triplist-map__canvas-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	height: 100%;
	background: #121820;
}

.triplist-map__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #121820;
}

/* No pane-wide filter on raster tiles — brightness()/saturate() on
   `.leaflet-tile-pane` amplifies sub-pixel gaps between CARTO PNGs
   into thick straight grid lines at every zoom. Per-tile filter lifts
   road/land contrast without that seam artifact. Never override tile
   img width/height. */
.triplist-map__canvas.leaflet-container {
	background: #121820;
}

.triplist-map__canvas .leaflet-tile-pane {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.triplist-map__canvas .leaflet-tile-container {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.triplist-map__canvas .leaflet-tile-container img.leaflet-tile {
	border: 0 !important;
	outline: none !important;
	box-shadow: 0 0 0 1px #121820;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	image-rendering: auto;
}

/* Key-free OSM raster fallback (only when MapLibre failed to load):
   invert the light OSM style so it matches the dark UI. */
.triplist-map__canvas .triplist-map__raster-fallback img.leaflet-tile {
	filter: invert(1) hue-rotate(190deg) brightness(0.72) contrast(0.95) saturate(0.6);
}

/* Vector overlay: roads, water, parks, landmarks, neighborhoods.
   Non-interactive so pins/clusters stay clickable. */
.triplist-map__canvas .triplist-map__context-layer,
.triplist-map__canvas .triplist-map__labels-layer {
	pointer-events: none;
}

.triplist-map__canvas .triplist-map__context-layer .maplibregl-canvas,
.triplist-map__canvas .triplist-map__labels-layer .maplibregl-canvas {
	opacity: 1;
}

.triplist-map__canvas .triplist-map__context-layer img.leaflet-tile,
.triplist-map__canvas .triplist-map__labels-layer img.leaflet-tile {
	box-shadow: none !important;
}

/* Loader + empty state pinned over the canvas so they stack above
   Leaflet tiles without affecting the map's layout. */

.triplist-map__loader {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px;
	background: rgba(10, 15, 20, 0.86);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.02em;
	z-index: 410; /* above Leaflet tiles + cluster icons (default <400) */
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.triplist-map__loader[hidden] {
	display: none !important;
}

.triplist-map__loader-spinner {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.18);
	border-top-color: #0CB8DF;
	animation: triplist-map-spin 0.85s linear infinite;
}

@keyframes triplist-map-spin {
	to { transform: rotate(360deg); }
}

.triplist-map__empty {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 360px;
	margin: 0;
	padding: 22px 26px;
	background: rgba(10, 15, 20, 0.85);
	color: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	font-size: 16px;
	line-height: 1.45;
	text-align: center;
	z-index: 410;
}

.triplist-map__empty[hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------- */
/* Grid/Map visibility toggle                                            */
/* -------------------------------------------------------------------- */

/* When the view switcher selects Map, hide the grid entirely but keep
   it in the DOM so re-entering Grid/List doesn't re-paint everything.
   The grid is already styled via .list-view for List mode — that
   stays as-is. */
#triplist-main-grid.map-view {
	display: none !important;
}

/* Hard-hide every section that lives below the map shell when Map mode
   is active. We listen on both the body data attribute and a body class
   (toggled in syncViewShell) so a brief race during first paint can't
   leak the grid/suggested cards. Specificity raised via #dnd-triplist-wrapper
   so any inline `.suggested-section .triplist-content-grid { display: block !important }`
   in the template can't win the cascade. */
body[data-triplist-view="map"] #triplist-main-grid,
body[data-triplist-view="map"] #triplist-no-places-message,
body[data-triplist-view="map"] #moodboard-wrapper,
body[data-triplist-view="map"] #moodboard-suggested-title,
body[data-triplist-view="map"] .suggested-section,
body[data-triplist-view="map"] .suggested-initial-loader,
body[data-triplist-view="map"] .moodboard-suggested-title,
body.triplist-map-mode #triplist-main-grid,
body.triplist-map-mode #triplist-no-places-message,
body.triplist-map-mode #moodboard-wrapper,
body.triplist-map-mode #moodboard-suggested-title,
body.triplist-map-mode .suggested-section,
body.triplist-map-mode .suggested-initial-loader,
body.triplist-map-mode .moodboard-suggested-title {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	overflow: hidden !important;
}

/* -------------------------------------------------------------------- */
/* View panel — grid and map share one content slot (tab swap)           */
/* -------------------------------------------------------------------- */

.triplist-view-panel {
	position: relative;
	width: 100%;
}

#triplist-view-panel.triplist-view-panel--map {
	min-height: 65vh;
}


/* -------------------------------------------------------------------- */
/* Pin markup (Leaflet divIcon)                                          */
/* -------------------------------------------------------------------- */

/* Leaflet wraps our HTML in a .leaflet-marker-icon div; reset its
   background so the custom pin is the only visual element. */
.triplist-map__pin-icon,
.triplist-map__cluster-icon {
	background: transparent !important;
	border: 0 !important;
}

.leaflet-marker-icon.triplist-map__pin-icon {
	overflow: visible !important;
}

.triplist-map__pin {
	position: relative;
	width: 46px;
	height: 56px;
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: auto;
	cursor: pointer;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
	transition: transform 160ms ease;
}

.triplist-map__pin:hover {
	transform: translateY(-2px) scale(1.04);
}

.triplist-map__pin-shell {
	position: relative;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, #0CB8DF 0%, #1380a8 100%);
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
	z-index: 2;
	flex-shrink: 0;
}

.triplist-map__pin-shell.is-fallback {
	background: linear-gradient(135deg, #0CB8DF 0%, #1380a8 100%);
}

.triplist-map__pin-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Small anchor dot under the circular thumb — sits on the lat/lng. */
.triplist-map__pin-dot {
	display: block;
	width: 10px;
	height: 10px;
	margin-top: -2px;
	border-radius: 50%;
	background: linear-gradient(135deg, #0CB8DF 0%, #1380a8 100%);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	flex-shrink: 0;
	z-index: 1;
}

/* -------------------------------------------------------------------- */
/* Cluster bubble                                                        */
/* -------------------------------------------------------------------- */

.triplist-map__cluster {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(10, 15, 20, 0.92);
	border: 2px solid #0CB8DF;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
}

.triplist-map__cluster-count {
	font-feature-settings: 'tnum' 1;
}

/* Override the markercluster default ".marker-cluster" rules so our
   custom divIcon doesn't inherit the green/yellow/red backgrounds. */
.leaflet-marker-icon.triplist-map__cluster-icon .marker-cluster,
.leaflet-marker-icon.triplist-map__cluster-icon .marker-cluster div,
.leaflet-marker-icon.triplist-map__cluster-icon .marker-cluster span {
	background: transparent !important;
	color: inherit !important;
}

/* -------------------------------------------------------------------- */
/* Card focus highlight after a pin click                                */
/* -------------------------------------------------------------------- */

.moodboard-holder.is-pin-focused {
	position: relative;
	z-index: 5;
	animation: triplist-pin-focus 1.6s ease;
}

@keyframes triplist-pin-focus {
	0%   { box-shadow: 0 0 0 0 rgba(12, 184, 223, 0.0); }
	18%  { box-shadow: 0 0 0 4px rgba(12, 184, 223, 0.55); }
	100% { box-shadow: 0 0 0 0 rgba(12, 184, 223, 0.0); }
}

/* -------------------------------------------------------------------- */
/* Leaflet UI tweaks (dark theme parity)                                 */
/* -------------------------------------------------------------------- */

.triplist-map__canvas .leaflet-control-zoom {
	font-size: 18px;
}
.triplist-map__canvas .leaflet-control-zoom a {
	width: 36px;
	height: 36px;
	line-height: 34px;
	font-size: 20px;
	background: rgba(10, 15, 20, 0.92);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.triplist-map__canvas .leaflet-control-zoom a:hover {
	background: rgba(20, 28, 36, 0.95);
}

.triplist-map__canvas .leaflet-control-attribution {
	background: rgba(10, 15, 20, 0.7);
	color: rgba(255, 255, 255, 0.6);
}

.triplist-map__canvas .leaflet-control-attribution a {
	color: rgba(12, 184, 223, 0.85);
}

/* -------------------------------------------------------------------- */
/* Desktop sidebar                                                       */
/* -------------------------------------------------------------------- */

/* Mobile-first: the sidebar is collapsed at narrow widths so the map
   gets the full shell. We don't use [hidden] here so the JS can still
   build/refresh rows in the background (e.g. when a user resizes from
   mobile back to desktop without reloading) and the desktop reveal at
   the media query is a pure CSS toggle. */
.triplist-map__sidebar {
	display: none;
}

@media (min-width: 769px) {
	.triplist-map__sidebar {
		display: flex;
		flex-direction: column;
		/* Wider sidebar on desktop so place names, addresses, and the
		   Book CTA have room at the larger card type scale. */
		flex: 0 0 min(680px, 52vw);
		width: min(680px, 52vw);
		max-width: min(680px, 52vw);
		height: 100%;
		background: rgba(4, 14, 20, 0.95);
		border-right: 1px solid rgba(255, 255, 255, 0.08);
		color: #fff;
		overflow: hidden;
	}
}

.triplist-map__sidebar-head {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px 14px;
	background: linear-gradient(180deg, rgba(4, 14, 20, 0.98) 70%, rgba(4, 14, 20, 0));
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.triplist-map__sidebar-eyebrow {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.triplist-map__sidebar-count {
	font-size: 17px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55);
	font-feature-settings: 'tnum' 1;
}

.triplist-map__sidebar-count:empty {
	display: none;
}

.triplist-map__sidebar-list {
	list-style: none;
	margin: 0;
	padding: 12px 16px 20px;
	overflow-y: auto;
	flex: 1 1 auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.triplist-map__sidebar-list::-webkit-scrollbar {
	width: 8px;
}

.triplist-map__sidebar-list::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 8px;
}

.triplist-map__sidebar-item {
	margin: 0 0 10px;
	padding: 0;
	position: relative;
}

.triplist-map__sidebar-item:last-child {
	margin-bottom: 0;
}

.triplist-map__sidebar-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.04);
	overflow: hidden;
	transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.triplist-map__sidebar-item.is-selected .triplist-map__sidebar-card {
	background: rgba(12, 184, 223, 0.16);
	border-color: rgba(12, 184, 223, 0.85);
	box-shadow: 0 0 0 1px rgba(12, 184, 223, 0.35) inset;
}

.triplist-map__sidebar-row {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px 14px;
	min-height: 104px;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: #fff;
	text-align: left;
	cursor: pointer;
	transition: background 160ms ease;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.triplist-map__sidebar-row:hover {
	background: rgba(255, 255, 255, 0.04);
}

.triplist-map__sidebar-row:focus-visible {
	outline: 2px solid #0CB8DF;
	outline-offset: -2px;
}

.triplist-map__sidebar-item.is-selected .triplist-map__sidebar-row:hover {
	background: rgba(12, 184, 223, 0.08);
}

.triplist-map__sidebar-thumb {
	width: 76px;
	height: 76px;
	border-radius: 14px;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
	display: block;
}

.triplist-map__sidebar-thumb.is-fallback {
	background: linear-gradient(135deg, #0CB8DF 0%, #1380a8 100%);
}

.triplist-map__sidebar-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	justify-content: center;
}

.triplist-map__sidebar-title {
	margin: 0;
	font-size: 1.375rem; /* 22px */
	font-weight: 800;
	line-height: 1.28;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.triplist-map__sidebar-sub {
	margin: 0;
	font-size: 1.0625rem; /* 17px */
	line-height: 1.42;
	color: rgba(255, 255, 255, 0.68);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.triplist-map__sidebar-sub:empty {
	display: none;
}

.triplist-map__sidebar-addr {
	margin: 4px 0 0;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 1.0625rem; /* 17px */
	line-height: 1.42;
	color: rgba(255, 255, 255, 0.58);
	min-width: 0;
}

.triplist-map__sidebar-addr:empty {
	display: none;
}

.triplist-map__sidebar-addr svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: rgba(12, 184, 223, 0.9);
}

.triplist-map__sidebar-addr > span {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* "..." overflow menu on each sidebar / deck card. The button sits
   absolutely positioned at the right of the card so the row button
   below it still spans the full width (cleaner hit target for the
   whole row → pin select). The menu itself is rendered as a clone of
   the matching trip-grid card's `.triplist-card-menu` so it
   inherits every action (Share / Add Note / Delete / Swap) the
   grid card already supports — see rebuildSidebar() in
   assets/js/triplist-map.js. */
.triplist-map__sidebar-item {
	position: relative;
}

.triplist-map__sidebar-item .triplist-map__sidebar-menu-wrap {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	z-index: 4;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 160ms ease, visibility 160ms ease;
}

.triplist-map__sidebar-item.is-selected .triplist-map__sidebar-menu-wrap {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.triplist-map__sidebar-footer {
	display: block;
	padding: 2px 14px 14px;
	margin: 0;
	position: relative;
	z-index: 2;
}

.triplist-map__sidebar-book {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	height: 44px;
	padding: 0 18px;
	border-radius: 12px;
	background: #0CB8DF;
	border: 0;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
	transition: background 160ms ease;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

a.triplist-map__sidebar-book:hover,
a.triplist-map__sidebar-book:focus-visible {
	background: #33c7ea;
	color: #fff;
	transform: none;
	box-shadow: none;
}

a.triplist-map__sidebar-book:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 2px;
}

.triplist-map__sidebar-book.is-disabled {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.38);
	box-shadow: none;
	cursor: default;
}

.triplist-map__sidebar-menu {
	appearance: none;
	-webkit-appearance: none;
	width: 36px;
	height: 36px;
	min-width: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.78);
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	padding: 0;
	margin: 0;
	letter-spacing: 0.1em;
	font-weight: 700;
	transition: background 160ms ease, color 160ms ease;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.triplist-map__sidebar-menu:hover,
.triplist-map__sidebar-menu:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.triplist-map__sidebar-menu:focus-visible {
	outline: 2px solid rgba(12, 184, 223, 0.8);
	outline-offset: 2px;
}

/* Reserve room for the overflow menu only on the selected card. */
.triplist-map__sidebar-item.is-selected:has(.triplist-map__sidebar-menu-wrap) .triplist-map__sidebar-row {
	padding-right: 56px;
}

.triplist-map__sidebar-empty {
	margin: 28px 14px;
	padding: 18px 20px;
	font-size: 1rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.04);
	border: 1px dashed rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	text-align: center;
}

/* -------------------------------------------------------------------- */
/* Pin label (revealed at high zoom)                                     */
/* -------------------------------------------------------------------- */

/* The label sits below the pin dot. By default it's hidden — when the
   user zooms in past the label threshold in triplist-map.js the canvas
   gets `.is-zoomed-in` and the label is revealed. pointer-events:none
   makes sure the label never intercepts a pin click. */
.triplist-map__pin-label {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 4px);
	max-width: 200px;
	padding: 5px 11px;
	background: rgba(4, 14, 20, 0.92);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
	letter-spacing: 0.01em;
}

.triplist-map__canvas.is-zoomed-in .triplist-map__pin-label {
	display: block;
}

/* -------------------------------------------------------------------- */
/* Selected pin (driven by the sidebar)                                  */
/* -------------------------------------------------------------------- */

/* Outer halo via box-shadow on the pin shell. */
.triplist-map__pin-icon.is-selected .triplist-map__pin-shell {
	box-shadow: 0 0 0 3px rgba(12, 184, 223, 0.65),
		0 0 0 6px rgba(12, 184, 223, 0.25);
}

.triplist-map__pin-icon.is-selected .triplist-map__pin {
	transform: translateY(-2px) scale(1.06);
}

/* Draggable-sheet affordance (hidden on desktop sidebar; mobile uses
   rules in the block below). */
.triplist-map__sheet-handle {
	display: none;
}

/* -------------------------------------------------------------------- */
/* Mobile: bottom sheet over full-bleed map                               */
/* -------------------------------------------------------------------- */

@keyframes triplist-map-mobile-sheet-in {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (min-width: 769px) {
	#triplist-view-panel.triplist-view-panel--map #triplist-map.triplist-map--open {
		display: block;
		position: relative;
		margin-top: 22px;
		width: 100%;
	}
}

@media (max-width: 768px) {
	/* Map tab: keep trip chrome (title, banner, day pills, view switcher).
	   Only swap the grid/list slot for the map panel — no full-viewport takeover. */
	body.page-template-template-triplist-php.triplist-map-mode #dnd-triplist-wrapper > .find-on-dnd-section,
	body.page-template-templatestemplate-triplist-php.triplist-map-mode #dnd-triplist-wrapper > .find-on-dnd-section,
	body.page-template-template-triplist.triplist-map-mode #dnd-triplist-wrapper > .find-on-dnd-section,
	body.page-template-template-triplist-php[data-triplist-view="map"] #dnd-triplist-wrapper > .find-on-dnd-section,
	body.page-template-templatestemplate-triplist-php[data-triplist-view="map"] #dnd-triplist-wrapper > .find-on-dnd-section,
	body.page-template-template-triplist[data-triplist-view="map"] #dnd-triplist-wrapper > .find-on-dnd-section,
	body.page-template-template-triplist-php.triplist-map-mode #dnd-triplist-wrapper #dnd-bulk-add-modal,
	body.page-template-templatestemplate-triplist-php.triplist-map-mode #dnd-triplist-wrapper #dnd-bulk-add-modal,
	body.page-template-template-triplist.triplist-map-mode #dnd-triplist-wrapper #dnd-bulk-add-modal,
	body.page-template-template-triplist-php[data-triplist-view="map"] #dnd-triplist-wrapper #dnd-bulk-add-modal,
	body.page-template-templatestemplate-triplist-php[data-triplist-view="map"] #dnd-triplist-wrapper #dnd-bulk-add-modal,
	body.page-template-template-triplist[data-triplist-view="map"] #dnd-triplist-wrapper #dnd-bulk-add-modal,
	body.page-template-template-triplist-php.triplist-map-mode #dnd-bulk-add-modal-overlay,
	body.page-template-templatestemplate-triplist-php.triplist-map-mode #dnd-bulk-add-modal-overlay,
	body.page-template-template-triplist.triplist-map-mode #dnd-bulk-add-modal-overlay,
	body.page-template-template-triplist-php[data-triplist-view="map"] #dnd-bulk-add-modal-overlay,
	body.page-template-templatestemplate-triplist-php[data-triplist-view="map"] #dnd-bulk-add-modal-overlay,
	body.page-template-template-triplist[data-triplist-view="map"] #dnd-bulk-add-modal-overlay {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
	}

	body.page-template-template-triplist-php.triplist-map-mode .triplist-place-filter-wrap--toolbar,
	body.page-template-templatestemplate-triplist-php.triplist-map-mode .triplist-place-filter-wrap--toolbar,
	body.page-template-template-triplist.triplist-map-mode .triplist-place-filter-wrap--toolbar,
	body.page-template-template-triplist-php[data-triplist-view="map"] .triplist-place-filter-wrap--toolbar,
	body.page-template-templatestemplate-triplist-php[data-triplist-view="map"] .triplist-place-filter-wrap--toolbar,
	body.page-template-template-triplist[data-triplist-view="map"] .triplist-place-filter-wrap--toolbar,
	body.page-template-template-triplist-php.triplist-map-mode .triplist-place-filter-wrap--toolbar[hidden],
	body.page-template-templatestemplate-triplist-php.triplist-map-mode .triplist-place-filter-wrap--toolbar[hidden],
	body.page-template-template-triplist.triplist-map-mode .triplist-place-filter-wrap--toolbar[hidden],
	body.page-template-template-triplist-php[data-triplist-view="map"] .triplist-place-filter-wrap--toolbar[hidden],
	body.page-template-templatestemplate-triplist-php[data-triplist-view="map"] .triplist-place-filter-wrap--toolbar[hidden],
	body.page-template-template-triplist[data-triplist-view="map"] .triplist-place-filter-wrap--toolbar[hidden],
	body.page-template-template-triplist-php.triplist-map-mode .triplist-place-filter-wrap--toolbar.triplist-toolbar--empty,
	body.page-template-templatestemplate-triplist-php.triplist-map-mode .triplist-place-filter-wrap--toolbar.triplist-toolbar--empty,
	body.page-template-template-triplist.triplist-map-mode .triplist-place-filter-wrap--toolbar.triplist-toolbar--empty,
	body.page-template-template-triplist-php[data-triplist-view="map"] .triplist-place-filter-wrap--toolbar.triplist-toolbar--empty,
	body.page-template-templatestemplate-triplist-php[data-triplist-view="map"] .triplist-place-filter-wrap--toolbar.triplist-toolbar--empty,
	body.page-template-template-triplist[data-triplist-view="map"] .triplist-place-filter-wrap--toolbar.triplist-toolbar--empty {
		display: flex !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	body.page-template-template-triplist-php.triplist-map-mode #triplist-view-panel.triplist-view-panel--map,
	body.page-template-templatestemplate-triplist-php.triplist-map-mode #triplist-view-panel.triplist-view-panel--map,
	body.page-template-template-triplist.triplist-map-mode #triplist-view-panel.triplist-view-panel--map,
	body.page-template-template-triplist-php[data-triplist-view="map"] #triplist-view-panel.triplist-view-panel--map,
	body.page-template-templatestemplate-triplist-php[data-triplist-view="map"] #triplist-view-panel.triplist-view-panel--map,
	body.page-template-template-triplist[data-triplist-view="map"] #triplist-view-panel.triplist-view-panel--map {
		position: relative;
		display: block !important;
		margin: 0 !important;
		padding: 0 12px 12px !important;
		width: 100% !important;
		max-width: none !important;
		height: var(--triplist-map-mobile-panel-h, 55vh) !important;
		min-height: 280px !important;
		max-height: 70vh !important;
		box-sizing: border-box;
	}

	/* Never show the in-map copy of the sidebar on mobile — only the
	   portaled sheet (see mountMobileMapSheet in triplist-map.js). */
	.triplist-map.triplist-map--open .triplist-map__shell > .triplist-map__sidebar {
		display: none !important;
	}

	/* Host for the portaled place-card sheet (direct child of body). */
	#dnd-triplist-map-sheet-host {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--triplist-map-mobile-sheet-bottom, 0px);
		z-index: 2147483646;
		isolation: isolate;
		pointer-events: none;
		display: block;
		will-change: transform;
	}

	#dnd-triplist-map-sheet-host.is-sheet-dragging,
	#dnd-triplist-map-sheet-host.is-sheet-dismissing {
		animation: none !important;
		transition: none;
	}

	#dnd-triplist-map-sheet-host:has(.triplist-map__sidebar.has-selection) {
		pointer-events: auto;
	}

	#dnd-triplist-map-sheet-host .triplist-map__sidebar {
		pointer-events: auto;
	}

	#triplist-map.triplist-map--open {
		display: block !important;
		visibility: visible;
		opacity: 1;
		margin-top: 0 !important;
	}

	#triplist-view-panel.triplist-view-panel--map #triplist-map.triplist-map--open {
		display: block !important;
		position: relative;
		inset: auto;
		margin: 0 !important;
		width: 100% !important;
		max-width: none;
		height: 100% !important;
		min-height: 100% !important;
	}

	#triplist-view-panel.triplist-view-panel--map .triplist-map.triplist-map--open .triplist-map__shell {
		display: flex;
		flex-direction: column;
		position: relative;
		width: 100%;
		height: 100% !important;
		min-height: 100% !important;
		border-radius: 20px;
		overflow: hidden;
		border: 1px solid rgba(255, 255, 255, 0.1);
		box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
		--triplist-map-mobile-toolbar-h: 72px;
		--triplist-map-mobile-sheet-h: 132px;
	}

	/* Map canvas first in the flex column; the sheet is portaled/fixed. */
	.triplist-map.triplist-map--open .triplist-map__canvas-wrap {
		order: 1;
		flex: 1 1 auto;
		min-height: 0;
	}

	.triplist-map__canvas .leaflet-control-attribution {
		display: none !important;
	}

	.triplist-map__canvas.is-zoomed-in .triplist-map__pin-label {
		font-size: 14px;
		max-width: 160px;
	}

	.triplist-map.triplist-map--open .triplist-map__canvas-wrap {
		position: relative;
		flex: 1 1 auto;
		width: 100%;
		height: 100%;
		min-height: 240px;
	}

	.triplist-map.triplist-map--open .triplist-map__canvas,
	#triplist-view-panel.triplist-view-panel--map .triplist-map__canvas {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	#dnd-triplist-map-sheet-host .triplist-map__sidebar,
	.triplist-map.triplist-map--open .triplist-map__sidebar,
	body > .triplist-map__sidebar.triplist-map__sidebar--portaled {
		display: flex !important;
		flex-direction: column;
		order: 2;
		position: relative !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		top: auto !important;
		z-index: 1 !important;
		width: 100% !important;
		max-width: none !important;
		flex: none !important;
		height: auto !important;
		max-height: min(
			50dvh,
			calc(var(--triplist-map-mobile-panel-h, 320px) - 12px)
		);
		min-height: 0;
		padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
		border-radius: 20px 20px 0 0;
		border-right: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		background: rgba(4, 14, 20, 0.98);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
		box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.55);
		overflow: visible;
		pointer-events: auto;
	}

	#dnd-triplist-map-sheet-host .triplist-map__sidebar.has-selection:not(.is-sheet-dragging):not(.is-sheet-dismissing) {
		animation: triplist-map-mobile-sheet-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	#dnd-triplist-map-sheet-host .triplist-map__sidebar.is-sheet-dragging,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar.is-sheet-dismissing {
		animation: none !important;
	}

	#dnd-triplist-map-sheet-host .triplist-map__sidebar:not(.has-selection),
	.triplist-map.triplist-map--open .triplist-map__sidebar:not(.has-selection),
	body > .triplist-map__sidebar.triplist-map__sidebar--portaled:not(.has-selection) {
		display: none !important;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar-head,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar-head,
	.triplist-map__sidebar--portaled .triplist-map__sidebar-head,
	.triplist-map__sidebar--deck .triplist-map__sidebar-head {
		display: none !important;
	}

	#dnd-triplist-map-sheet-host .triplist-map__sidebar-count {
		display: none !important;
	}

	.triplist-map.triplist-map--open .triplist-map__sheet-handle,
	#dnd-triplist-map-sheet-host .triplist-map__sheet-handle {
		display: block;
		width: 40px;
		height: 4px;
		margin: 0 auto;
		padding: 14px 40px 10px;
		border: 0;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.28);
		background-clip: content-box;
		box-sizing: content-box;
		flex-shrink: 0;
		cursor: grab;
		touch-action: none;
		-webkit-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
	}

	#dnd-triplist-map-sheet-host.is-sheet-dragging,
	.triplist-map__sidebar.is-sheet-dragging,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar.is-sheet-dragging {
		transition: none !important;
	}

	#dnd-triplist-map-sheet-host.is-sheet-dragging .triplist-map__sheet-handle,
	.triplist-map__sidebar.is-sheet-dragging .triplist-map__sheet-handle,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar.is-sheet-dragging .triplist-map__sheet-handle {
		cursor: grabbing;
	}

	#dnd-triplist-map-sheet-host .triplist-map__sheet-handle {
		position: relative;
		z-index: 4;
		flex-shrink: 0;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar-list {
		flex: 0 0 auto;
		min-height: 0;
		overflow: visible;
		padding: 0 14px 14px;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar--deck .triplist-map__sidebar-list,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar--deck .triplist-map__sidebar-list {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		touch-action: pan-x;
		gap: 12px;
		padding: 0 14px 14px;
		scroll-padding-inline: 14px;
		scrollbar-width: none;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar--deck .triplist-map__sidebar-list::-webkit-scrollbar,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar--deck .triplist-map__sidebar-list::-webkit-scrollbar {
		display: none;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar--deck .triplist-map__sidebar-item,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar--deck .triplist-map__sidebar-item {
		flex: 0 0 86% !important;
		max-width: 360px;
		scroll-snap-align: center;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar--deck .triplist-map__sidebar-card-inner,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar--deck .triplist-map__sidebar-card-inner {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 0 10px 0 0;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar--deck .triplist-map__sidebar-row,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar--deck .triplist-map__sidebar-row {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		min-height: 0;
		padding: 10px 0 10px 12px;
		gap: 10px;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar-row,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar-row {
		min-height: 100px;
		padding: 12px 14px 10px;
		gap: 12px;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar-card,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar-card {
		border: 1px solid rgba(12, 184, 223, 0.85);
		border-radius: 16px;
		background: rgba(4, 14, 20, 0.98);
		box-shadow: 0 0 0 1px rgba(12, 184, 223, 0.35) inset,
			0 8px 28px rgba(0, 0, 0, 0.45);
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar-item.is-selected .triplist-map__sidebar-row,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar-item.is-selected .triplist-map__sidebar-row {
		padding-right: 52px;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar--deck .triplist-map__sidebar-item.is-selected .triplist-map__sidebar-row,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar--deck .triplist-map__sidebar-item.is-selected .triplist-map__sidebar-row {
		padding-right: 0;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar--deck .triplist-map__sidebar-item .triplist-map__sidebar-menu-wrap,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar--deck .triplist-map__sidebar-item .triplist-map__sidebar-menu-wrap {
		display: none !important;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar-footer,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar-footer {
		padding: 2px 14px 16px;
		flex-shrink: 0;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar--deck .triplist-map__sidebar-footer,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar--deck .triplist-map__sidebar-footer {
		display: none !important;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar-title,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar-title {
		font-size: 19px;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar--deck .triplist-map__sidebar-title,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar--deck .triplist-map__sidebar-title {
		font-size: 16px;
		font-weight: 700;
		line-height: 1.25;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar--deck .triplist-map__sidebar-sub,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar--deck .triplist-map__sidebar-sub {
		display: none !important;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar--deck .triplist-map__sidebar-addr,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar--deck .triplist-map__sidebar-addr {
		margin: 2px 0 0;
		font-size: 15px;
		line-height: 1.3;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar--deck .triplist-map__sidebar-book--deck,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar--deck .triplist-map__sidebar-book--deck {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		min-width: 64px;
		height: 34px;
		padding: 0 14px;
		margin: 0 12px 0 0;
		border-radius: 10px;
		font-size: 14px;
		font-weight: 700;
	}

	/* City subtitle styling (deck cards omit the subtitle line). */
	.triplist-map.triplist-map--open .triplist-map__sidebar:not(.triplist-map__sidebar--deck) .triplist-map__sidebar-sub,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar:not(.triplist-map__sidebar--deck) .triplist-map__sidebar-sub {
		font-size: 15px;
		color: rgba(255, 255, 255, 0.78);
		font-weight: 500;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar-addr > span,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar-addr > span {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar--deck .triplist-map__sidebar-addr > span,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar--deck .triplist-map__sidebar-addr > span {
		-webkit-line-clamp: 1;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar-thumb,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar-thumb {
		width: 64px;
		height: 64px;
		border-radius: 50%;
		border: 2px solid rgba(12, 184, 223, 0.85);
		box-shadow: 0 0 0 2px rgba(12, 184, 223, 0.2);
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar--deck .triplist-map__sidebar-thumb,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar--deck .triplist-map__sidebar-thumb {
		width: 52px;
		height: 52px;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar--deck .triplist-map__sidebar-list,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar--deck .triplist-map__sidebar-list {
		padding: 0 14px 10px;
	}

	#dnd-triplist-map-sheet-host .triplist-map__sidebar--deck .triplist-map__sidebar,
	.triplist-map.triplist-map--open .triplist-map__sidebar--deck {
		padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
	}

	#dnd-triplist-map-sheet-host .triplist-map__sheet-handle,
	.triplist-map.triplist-map--open .triplist-map__sheet-handle {
		padding: 10px 40px 6px;
	}

	.triplist-map.triplist-map--open .triplist-map__sidebar-thumb.is-fallback,
	#dnd-triplist-map-sheet-host .triplist-map__sidebar-thumb.is-fallback {
		border-radius: 50%;
	}

	.triplist-map.triplist-map--open .triplist-map__canvas .leaflet-bottom.leaflet-right {
		margin-bottom: calc(var(--triplist-map-mobile-sheet-h, 188px) + 16px);
	}

	.triplist-map.triplist-map--open .triplist-map__loader {
		top: 12px;
	}

	.triplist-map.triplist-map--open .triplist-map__empty {
		max-width: calc(100% - 28px);
	}
}

@media (max-width: 600px) {
	body.page-template-template-triplist-php.triplist-map-mode #triplist-view-panel.triplist-view-panel--map,
	body.page-template-template-triplist.triplist-map-mode #triplist-view-panel.triplist-view-panel--map,
	body.page-template-template-triplist-php[data-triplist-view="map"] #triplist-view-panel.triplist-view-panel--map,
	body.page-template-template-triplist[data-triplist-view="map"] #triplist-view-panel.triplist-view-panel--map {
		padding: 0 10px 10px !important;
	}
}

/* Desktop trip column: see core.css (--triplist-content-width, #dnd-triplist-wrapper) */