/**
 * Drumul Împletit Map: styles.
 *
 * Visual language matched to the Drumul Împletit website
 * (references/homepage-design.jpg): warm ivory backgrounds, brown brand
 * surfaces, condensed uppercase headings, pill buttons, rounded photos,
 * thin rules and "(01)" numbering.
 *
 * Every selector is scoped under .di-map so the plugin is independent
 * from the WordPress theme. Adjust colours and fonts in the tokens below.
 */

/* ---------- Tokens (edit here) ---------- */

.di-map {
	/* Colours sampled from the website */
	--di-ivory: #FBF6F2;        /* page background */
	--di-brown: #745539;        /* brand surface, buttons, kickers */
	--di-brown-dark: #5C432D;   /* hover / pressed brown (ivory text 8.5:1) */
	--di-sand: #99846F;         /* decorative only: 3.3:1 on ivory, never for text */
	--di-ink: #151515;          /* text */
	--di-white: #FFFFFF;
	--di-location: #5D593C;     /* visitor's location dot (distinct from brown markers) */

	/* Derived */
	--di-on-brown: var(--di-ivory);                  /* 6.3:1 on brown */
	--di-on-brown-muted: rgba(251, 246, 242, 0.82);  /* ≥ 4.6:1 on brown */
	--di-rule-on-brown: rgba(251, 246, 242, 0.32);
	/* Destination panel (Wave 12): warm beige editorial surface (checked contrast:
	   ink 15.7:1, ink-muted 6.3:1, brown 5.8:1; brown on the selected row 4.9:1). */
	--di-panel-bg: #F4EDE5;
	--di-panel-text: var(--di-ink);
	--di-panel-muted: var(--di-ink-muted);
	--di-panel-rule: var(--di-rule);
	--di-panel-hover: rgba(116, 85, 57, 0.07);
	--di-panel-selected: rgba(116, 85, 57, 0.12);
	--di-ink-muted: rgba(21, 21, 21, 0.70);          /* 6.5:1 on ivory */
	--di-rule: rgba(116, 85, 57, 0.24);

	/* Typography (fonts are loaded by the WordPress theme; names must match it) */
	--di-font-display: "Barlow Semi Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
	--di-font-body: "Rubik", "Helvetica Neue", Arial, sans-serif;

	/* Geometry */
	--di-radius: 14px;           /* map and panel */
	--di-radius-photo: 12px;
	--di-gap: 16px;              /* between map and panel */
	--di-gutter: 28px;           /* panel inner spacing */
	--di-map-height: 700px;      /* desktop height (shortcode "height" overrides) */
	--di-map-mobile-height: 490px; /* map frame incl. the filter toolbar (Wave 11.1: was 440px) */
	--di-ctrl-size: 38px;        /* map control buttons */
	--di-scroll-offset: 16px;    /* space kept above the details when scrolled in (raise for a fixed theme header) */

	container-type: inline-size;
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	color: var(--di-ink);
	font-family: var(--di-font-body);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.di-map *,
.di-map *::before,
.di-map *::after {
	box-sizing: border-box;
}

/* ---------- Theme neutralization (elements we create) ---------- */

.di-map p,
.di-map ol,
.di-map li,
.di-map h2,
.di-map h3,
.di-map header,
.di-map article,
.di-map figure,
.di-map figcaption,
.di-map dl,
.di-map dt,
.di-map dd,
.di-map section {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.di-map h2,
.di-map h3 {
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/* Spans inherit their component's type (themes sometimes style bare spans). :where()
   keeps this at one class of specificity, so every class rule below still wins. */
.di-map :where(span) {
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

.di-map h2::before,
.di-map h2::after,
.di-map h3::before,
.di-map h3::after,
.di-map li::before,
.di-map li::marker {
	content: none;
}

.di-map ol,
.di-map li {
	list-style: none;
}

.di-map img {
	max-width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.di-map a {
	box-shadow: none;
	text-decoration: none;
}

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

/* Only our own buttons: MapLibre control buttons keep their own base styles. */
.di-map .di-map__item,
.di-map .di-map__marker,
.di-map .di-map__back,
.di-map .di-map__retry,
.di-map .di-map__geo-action,
.di-map .di-map__peek-open,
.di-map .di-map__peek-close,
.di-map .di-map__filter,
.di-map .di-map__journey-button,
.di-map .di-map__hub-close {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	width: auto;
	min-width: 0;
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

/* Focus: brown ring on light surfaces, ivory ring on brown surfaces. */
.di-map button:focus-visible,
.di-map a:focus-visible,
.di-map [tabindex="-1"]:focus-visible {
	outline: 2px solid var(--di-brown);
	outline-offset: 2px;
}

.di-map .di-map__attribution :focus-visible {
	outline-color: var(--di-ivory);
}

.di-map [tabindex="-1"]:focus:not(:focus-visible) {
	outline: none;
}

/* Full-width rows sit edge to edge: draw their focus ring inside. */
.di-map .di-map__item:focus-visible,
.di-map .di-map__back:focus-visible {
	outline-offset: -4px;
}

.di-map .di-map__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Small "↗" arrow before kickers, as on the website. */
.di-map .di-map__kicker::before,
.di-map .di-map__hub-kicker::before,
.di-map .di-map__detail-meta .di-map__type::before,
.di-map .di-map__chooser-title::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-right: 8px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18L18 6M8 6h10v10' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18L18 6M8 6h10v10' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Layout: map ~70%, panel ~30% ---------- */

.di-map__layout {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr);
	gap: var(--di-gap);
	height: var(--di-map-height);
}

/* Explicit cells: the orientation cards share the map's cell (they overlay it). */
.di-map__stage {
	grid-area: 1 / 1;
}

.di-map__panel {
	grid-area: 1 / 2;
}

.di-map__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	border: 1px solid var(--di-rule);
	border-radius: var(--di-radius);
	background: var(--di-ivory);
}

.di-map__canvas {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

/* Basemap failed or unavailable: hide the empty map (and its markers/controls
   from keyboard focus) behind the error state. */
.di-map.is-map-failed .di-map__canvas {
	visibility: hidden;
}

.di-map__panel {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	/* Hairline frame; the inner gutter is 1px smaller so text widths stay as before. */
	--di-gutter: 27px;
	border: 1px solid var(--di-panel-rule);
	border-radius: var(--di-radius);
	background: var(--di-panel-bg);
	color: var(--di-panel-text);
}

.di-map__view {
	position: relative; /* offsetParent for list scrolling */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	scrollbar-color: var(--di-panel-rule) transparent;
}

/* Narrow containers (mobile, or a narrow WordPress column): map first, panel below. */
@container (max-width: 720px) {
	.di-map__layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: var(--di-map-mobile-height) auto;
		gap: 12px;
		height: auto;
		--di-gutter: 20px;
		--di-ctrl-size: 42px; /* larger touch targets */
	}

	.di-map__stage,
	.di-map__panel {
		border-radius: 12px;
	}

	.di-map__view {
		overflow: visible;
	}

	.di-map .di-map__panel-title,
	.di-map .di-map__detail-name {
		font-size: 34px;
	}

	/* The destination detail sits directly under the map. */
	.di-map__panel.is-detail .di-map__panel-head {
		display: none;
	}
}

/* ---------- Panel header ---------- */

.di-map .di-map__panel-head {
	padding: var(--di-gutter) var(--di-gutter) 22px;
	border-bottom: 1px solid var(--di-panel-rule);
}

.di-map .di-map__kicker {
	display: flex;
	align-items: center;
	color: var(--di-brown);
	font-family: var(--di-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.di-map .di-map__panel-title {
	margin-top: 12px;
	font-family: var(--di-font-display);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.06; /* room for Ș/Ț comma-below when a title wraps */
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.di-map .di-map__panel-meta {
	margin-top: 10px;
	color: var(--di-panel-muted);
	font-size: 13px;
}

/* ---------- Destination list (editorial rows, as the website's category list) ---------- */

.di-map .di-map__list-row {
	border-bottom: 1px solid var(--di-panel-rule);
}

.di-map .di-map__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "body num";
	column-gap: 16px;
	align-items: center;
	width: 100%;
	padding: 18px var(--di-gutter);
}

.di-map .di-map__item .di-map__item-body {
	grid-area: body;
}

.di-map .di-map__item .di-map__num {
	grid-area: num;
}

/* Number shown as "(01)", like the website; the text itself stays "01". */
.di-map__num {
	color: var(--di-panel-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.di-map__num::before {
	content: "(";
}

.di-map__num::after {
	content: ")";
}

.di-map__item-body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.di-map__type {
	color: var(--di-panel-muted);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.di-map__name {
	font-family: var(--di-font-display);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* Panel rows: number (orientation with the markers) + a discreet arrow. The chooser
   reuses .di-map__item without these. */
.di-map .di-map__list-row .di-map__item {
	grid-template-columns: minmax(0, 1fr) auto 14px;
	grid-template-areas: "body num arrow";
	column-gap: 10px; /* the longest title ("Gara Bulboaca și vița-de-vie") stays on one line at 1440 */
}

.di-map .di-map__list-row .di-map__item::after {
	content: "→";
	grid-area: arrow;
	justify-self: end;
	color: var(--di-brown);
	font-size: 15px;
	line-height: 1;
}

.di-map .di-map__list-row .di-map__item.is-selected {
	background: var(--di-panel-selected);
	box-shadow: inset 3px 0 0 var(--di-brown);
}

/* Entries without a map position: "Alte locuri și trasee · N" (listed, never a marker). */
.di-map .di-map__list-heading {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 26px var(--di-gutter) 12px;
	border-bottom: 1px solid var(--di-panel-rule);
	color: var(--di-panel-muted);
	font-family: var(--di-font-body);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Hollow ring: "no marker yet" (markers are filled pills). */
.di-map .di-map__list-heading::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}

.di-map .di-map__list-row.is-pending .di-map__item {
	padding-top: 15px;
	padding-bottom: 15px;
}

/* No marker, but not "disabled": same type colours; the section heading tells them apart. */

/* ---------- Filters: toolbar on the map frame's top edge (Wave 11.1) ----------
 * Ivory strip above the map canvas, inside the rounded frame: never over geography,
 * markers, controls or attribution. Wraps on wide maps, one scrollable row when stacked. */

.di-map .di-map__filters {
	position: relative;
	z-index: 4; /* stays usable above the basemap error state */
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--di-rule);
	background: var(--di-ivory);
}

.di-map .di-map__filter {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 6px 12px;
	border: 1px solid var(--di-brown);
	border-radius: 999px;
	color: var(--di-brown);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

.di-map .di-map__filter-count {
	color: var(--di-ink-muted);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.di-map .di-map__filter[aria-pressed="true"] {
	background: var(--di-brown);
	color: var(--di-ivory);
}

.di-map .di-map__filter[aria-pressed="true"] .di-map__filter-count {
	color: var(--di-on-brown-muted);
}

.di-map .di-map__empty {
	padding: 22px var(--di-gutter);
	color: var(--di-panel-muted);
	font-size: 14px;
	line-height: 1.5;
}

/* Route with a verified GPX file: a short line instead of a number. */
.di-map .di-map__item .di-map__route-mark {
	grid-area: num;
	display: block;
	width: 22px;
	height: 0;
	border-top: 3px solid var(--di-panel-text);
	border-radius: 2px;
}

/* ---------- Locality hub card on the map (Wave 11) ----------
 * Ivory card over the map's bottom-left corner (above the attribution strip); between map
 * and panel when the layout is stacked. Page context only: no destination, no GPS. */

.di-map .di-map__hub {
	position: relative;
	z-index: 4;
	grid-area: 1 / 1;
	align-self: end;
	justify-self: start;
	box-sizing: border-box;
	width: min(320px, calc(100% - 28px));
	margin: 0 0 44px 14px;
	padding: 14px 46px 16px 18px;
	border: 1px solid var(--di-rule);
	border-radius: var(--di-radius-photo);
	background: var(--di-ivory);
	color: var(--di-ink);
}

/* Focus rings on ivory surfaces inside the map are brown. */
.di-map .di-map__hub :focus-visible,
.di-map .di-map__filters :focus-visible {
	outline-color: var(--di-brown);
}

/* No map, no map overlay (the destination list keeps working). */
.di-map.is-map-failed .di-map__hub {
	display: none;
}

.di-map .di-map__hub-kicker {
	display: flex;
	align-items: center;
	color: var(--di-brown);
	font-family: var(--di-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.di-map .di-map__hub-title {
	margin-top: 8px;
	color: var(--di-ink);
	font-family: var(--di-font-display);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.di-map .di-map__hub-text {
	margin-top: 8px;
	color: var(--di-ink-muted);
	font-size: 13px;
	line-height: 1.5;
}

.di-map .di-map__hub-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: var(--di-brown);
}

.di-map .di-map__hub-close::before,
.di-map .di-map__hub-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

.di-map .di-map__hub-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---------- Regional journey (Wave 11.1) ----------
 * The connection is a dashed MapLibre line layer; the map carries only a small legend.
 * The panel keeps a compact, accessible row of the stops. */

.di-map .di-map__legend {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100% - 24px);
	padding: 5px 12px;
	border: 1px solid var(--di-rule);
	border-radius: 999px;
	background: rgba(251, 246, 242, 0.94);
	color: var(--di-ink);
	font-size: 11.5px;
	line-height: 1.35;
	pointer-events: none; /* never blocks the map */
}

.di-map .di-map__legend-line {
	flex: 0 0 auto;
	width: 24px;
	height: 0;
	border-top: 3px dashed var(--di-brown);
}

/* The mobile peek card takes the bottom of the map while it is shown. */
.di-map .di-map__peek:not([hidden]) ~ .di-map__legend {
	visibility: hidden;
}

.di-map .di-map__journey {
	padding: 22px var(--di-gutter) 26px;
}

.di-map .di-map__journey-kicker {
	color: var(--di-panel-muted);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.di-map .di-map__journey-stops {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 2px;
	margin-top: 6px;
}

.di-map .di-map__journey-stop {
	display: flex;
	align-items: center;
}

.di-map .di-map__journey-stop + .di-map__journey-stop::before {
	content: "→";
	margin: 0 2px;
	color: var(--di-panel-muted);
	font-size: 13px;
}

.di-map .di-map__journey-button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 28px;
	padding: 2px 6px;
	border-radius: 6px;
	color: var(--di-panel-text);
	font-family: var(--di-font-display);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: var(--di-panel-rule);
	text-underline-offset: 4px;
}

/* No position on the map: hollow ring, as in "Fără poziție confirmată pe hartă". */
.di-map .di-map__journey-button.is-pending::before {
	content: "";
	width: 8px;
	height: 8px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}

.di-map .di-map__journey-hub {
	padding: 2px 6px;
	border-radius: 999px;
	background: var(--di-brown);
	color: var(--di-ivory);
	font-family: var(--di-font-body);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-decoration: none;
}

.di-map .di-map__journey-branch {
	margin-top: 4px;
	color: var(--di-panel-muted);
	font-size: 12px;
	line-height: 1.45;
}

/* Stacked layout: hub card between map and panel; filters in one scrollable row. */
@container (max-width: 720px) {
	.di-map .di-map__hub {
		grid-area: 2 / 1;
		align-self: auto;
		justify-self: stretch;
		width: auto;
		margin: 0;
	}

	/* Auto-placed: under the hub card when shown, directly under the map otherwise.
	   Gutter 20px minus the 1px frame. */
	.di-map__panel {
		grid-area: auto;
		--di-gutter: 19px;
	}

	.di-map .di-map__filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		padding: 8px 10px;
	}

	.di-map .di-map__filters::-webkit-scrollbar {
		display: none;
	}

	.di-map .di-map__filter {
		min-height: 36px; /* touch targets */
	}

	.di-map .di-map__journey-button {
		min-height: 32px;
	}

	.di-map .di-map__legend {
		font-size: 11px;
	}
}

/* ---------- Destination detail ---------- */

.di-map .di-map__back {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 16px var(--di-gutter);
	border-bottom: 1px solid var(--di-panel-rule);
	background: var(--di-panel-bg);
	color: var(--di-brown);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.di-map__back-arrow {
	font-size: 15px;
	letter-spacing: 0;
}

.di-map .di-map__detail {
	padding: 24px var(--di-gutter) var(--di-gutter);
}

/* Optional photo: rounded, as the website's photography. */
.di-map .di-map__figure {
	margin: 0 0 22px;
}

.di-map .di-map__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--di-radius-photo);
}

.di-map .di-map__credit {
	margin-top: 6px;
	color: var(--di-panel-muted);
	font-size: 11px;
}

.di-map .di-map__detail-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.di-map .di-map__detail-meta .di-map__type {
	display: flex;
	align-items: center;
	order: -1;
	color: var(--di-brown);
	font-size: 12px;
}

.di-map .di-map__detail-name {
	margin-top: 14px;
	font-family: var(--di-font-display);
	font-size: 42px;
	font-weight: 700;
	line-height: 1.06; /* room for Ș/Ț comma-below when a title wraps */
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.di-map .di-map__detail-desc {
	margin-top: 16px;
	max-width: 34em;
	font-size: 16px;
	line-height: 1.6;
}

.di-map .di-map__detail-desc.is-empty {
	color: var(--di-panel-muted);
}

/* Primary CTA: the website's brown pill button. */
.di-map .di-map__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding: 14px 28px;
	border-radius: 999px;
	background: var(--di-brown);
	color: var(--di-ivory);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.di-map__link-arrow {
	display: none; /* The website's buttons carry no arrow. */
}

/* Practical information (Wave 10): rows only when verified data exists. */
.di-map .di-map__visit {
	margin-top: 20px;
	border-top: 1px solid var(--di-panel-rule);
}

.di-map .di-map__visit-row {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--di-panel-rule);
	font-size: 14px;
	line-height: 1.45;
}

.di-map .di-map__visit-row dt {
	color: var(--di-panel-muted);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.di-map .di-map__visit-link {
	color: var(--di-panel-text);
	overflow-wrap: anywhere;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Navigation (external apps; only for confirmed coordinates) */
.di-map .di-map__nav {
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid var(--di-panel-rule);
}

.di-map .di-map__nav-title {
	margin-bottom: 10px;
	color: var(--di-panel-muted);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.di-map .di-map__nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 20px;
	border: 1px solid var(--di-brown);
	border-radius: 999px;
	color: var(--di-brown);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.di-map .di-map__nav-link + .di-map__nav-link {
	margin-top: 8px;
}

.di-map .di-map__nav-link .di-map__link-arrow {
	display: inline;
}

.di-map .di-map__nav-note {
	margin-top: 10px;
	color: var(--di-panel-muted);
	font-size: 12px;
	line-height: 1.5;
}

/* Route state notice (shown / failed to load). Wave 12: no coordinate-status notices. */
.di-map .di-map__nav-unavailable {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	color: var(--di-panel-muted);
	font-size: 13px;
	line-height: 1.5;
}

.di-map .di-map__nav-unavailable::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 11v6M12 7v1.5' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 11v6M12 7v1.5' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Scrolled-in details keep a little room above (theme headers). */
.di-map .di-map__view--detail {
	scroll-margin-top: var(--di-scroll-offset);
}

/* ---------- Markers: brown pill labels with a small pointer ---------- */

.di-map .di-map__marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}

.di-map__marker-plate {
	display: flex;
	justify-content: center;
	min-width: 34px;
	padding: 5px 10px;
	border: 1.5px solid var(--di-ivory); /* separates touching markers and dark map features */
	border-radius: 999px;
	background: var(--di-brown);
	color: var(--di-on-brown);
	font-family: var(--di-font-display);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

/* Shared marker (identical coordinates): numbers side by side. */
.di-map__marker-num + .di-map__marker-num {
	margin-left: 7px;
	padding-left: 7px;
	border-left: 1px solid rgba(251, 246, 242, 0.5);
}

/* Pointer under the pill (the marker is anchored at its bottom). */
.di-map .di-map__marker-post {
	display: block;
	width: 0;
	height: 0;
	margin-top: -1px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 7px solid var(--di-brown);
}

.di-map .di-map__marker.is-selected {
	z-index: 2;
}

.di-map .di-map__marker.is-selected .di-map__marker-plate {
	padding: 6px 12px;
	background: var(--di-ink);
	font-size: 15px;
}

.di-map .di-map__marker.is-selected .di-map__marker-post {
	border-top-color: var(--di-ink);
}

/* Cluster: ivory pill with a second outline behind it ("stack") and the count. */
.di-map .di-map__cluster .di-map__marker-plate {
	min-width: 38px;
	padding: 4px 11px;
	border: 2px solid var(--di-brown);
	background: var(--di-ivory);
	color: var(--di-brown);
	font-size: 15px;
	font-weight: 700;
	box-shadow: 4px -4px 0 -2px var(--di-ivory), 4px -4px 0 0 var(--di-brown);
}

.di-map .di-map__cluster.has-selected {
	z-index: 2;
}

.di-map .di-map__cluster.has-selected .di-map__marker-plate {
	border-color: var(--di-ink);
	color: var(--di-ink);
	box-shadow: 4px -4px 0 -2px var(--di-ivory), 4px -4px 0 0 var(--di-ink);
}

.di-map .di-map__cluster.has-selected .di-map__marker-post {
	border-top-color: var(--di-ink);
}

/* ---------- Visitor location ("Locația mea") ---------- */

/* Round dot in a different colour: clearly not a destination marker. */
.di-map .di-map__me {
	width: 18px;
	height: 18px;
	border: 3px solid var(--di-white);
	border-radius: 50%;
	background: var(--di-location);
	box-shadow: 0 0 0 1px var(--di-ink);
	pointer-events: none;
}

/* Compact status chip (top-left): accuracy, "Centrează", stop/close. */
.di-map .di-map__geo-status {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: min(340px, calc(100% - 28px - var(--di-ctrl-size) - 12px));
	padding: 5px 5px 5px 14px;
	border: 1px solid var(--di-rule);
	border-radius: 20px;
	background: var(--di-ivory);
	color: var(--di-ink);
	font-size: 12px;
	line-height: 1.4;
}

.di-map .di-map__geo-status.is-error {
	border-color: var(--di-brown);
}

.di-map .di-map__geo-text {
	padding: 3px 0;
}

.di-map .di-map__geo-actions {
	display: flex;
	flex: 0 0 auto;
	gap: 4px;
}

.di-map .di-map__geo-action {
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--di-brown);
	color: var(--di-white);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* "×" (stop / close) */
.di-map .di-map__geo-action.is-icon {
	position: relative;
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent;
	color: var(--di-ink);
}

.di-map .di-map__geo-action.is-icon::before,
.di-map .di-map__geo-action.is-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

.di-map .di-map__geo-action.is-icon::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---------- Mobile peek card (stacked layout only) ---------- */

.di-map .di-map__peek {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 8px 16px;
	border: 1px solid var(--di-rule);
	border-radius: var(--di-radius-photo);
	background: var(--di-ivory);
	color: var(--di-ink);
}

.di-map .di-map__peek-text {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.di-map .di-map__peek-num {
	flex: 0 0 auto;
	color: var(--di-ink-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.di-map .di-map__peek-num::before {
	content: "(";
}

.di-map .di-map__peek-num::after {
	content: ")";
}

.di-map .di-map__peek-name {
	overflow: hidden;
	font-family: var(--di-font-display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.15;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.di-map .di-map__peek-open,
.di-map .di-map__peek-close {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	margin: 0;
	border: 0;
	cursor: pointer;
	font: inherit;
}

.di-map .di-map__peek-open {
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--di-brown);
	color: var(--di-white);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.di-map .di-map__peek-close {
	position: relative;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--di-ink);
}

.di-map .di-map__peek-close::before,
.di-map .di-map__peek-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

.di-map .di-map__peek-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Side-by-side layout: the details are always beside the map. */
@container (min-width: 721px) {
	.di-map .di-map__peek {
		display: none !important;
	}
}

/* ---------- Hover (only on devices that can hover: no sticky hover after a tap) ---------- */

@media (hover: hover) {
	.di-map .di-map__list-row .di-map__item:hover {
		background: var(--di-panel-hover);
	}

	.di-map .di-map__list-row .di-map__item.is-selected:hover {
		background: var(--di-panel-selected);
	}

	.di-map .di-map__list-row .di-map__item:hover::after {
		color: var(--di-brown-dark);
	}

	.di-map .di-map__back:hover {
		background: var(--di-panel-hover);
	}

	.di-map .di-map__marker:hover .di-map__marker-plate {
		background: var(--di-brown-dark);
	}

	.di-map .di-map__marker.is-selected:hover .di-map__marker-plate {
		background: var(--di-ink);
	}

	.di-map .di-map__cluster:hover .di-map__marker-plate {
		background: var(--di-white);
	}

	.di-map .di-map__link:hover {
		background: var(--di-brown-dark);
	}

	.di-map .di-map__nav-link:hover {
		background: var(--di-brown);
		color: var(--di-ivory);
	}

	.di-map .di-map__retry:hover,
	.di-map .di-map__geo-action:hover,
	.di-map .di-map__peek-open:hover {
		background: var(--di-brown-dark);
	}

	.di-map .di-map__geo-action.is-icon:hover {
		background: rgba(116, 85, 57, 0.12);
	}

	/* Chooser rows sit on ivory. */
	.di-map .di-map__chooser .di-map__item:hover {
		background: rgba(116, 85, 57, 0.08);
	}

	.di-map .di-map__chooser .di-map__item.is-selected:hover {
		background: var(--di-brown);
	}

	.di-map .di-map__filter:not([aria-pressed="true"]):hover {
		background: rgba(116, 85, 57, 0.1);
	}

	.di-map .di-map__journey-button:hover {
		background: var(--di-panel-hover);
	}

	.di-map .di-map__hub-close:hover {
		background: rgba(116, 85, 57, 0.1);
	}
}

/* ---------- Chooser (marker shared by several destinations) ---------- */

.di-map .di-map__chooser .maplibregl-popup-content {
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--di-rule);
	border-radius: var(--di-radius-photo);
	background: var(--di-ivory);
	box-shadow: none;
	color: var(--di-ink);
	font-family: var(--di-font-body);
}

.di-map .di-map__chooser-title {
	display: flex;
	align-items: center;
	padding: 12px 18px 10px;
	border-bottom: 1px solid var(--di-rule);
	color: var(--di-brown);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.di-map .di-map__chooser .di-map__item {
	min-width: 240px;
	padding: 12px 18px;
}

.di-map .di-map__chooser .di-map__item + .di-map__item {
	border-top: 1px solid var(--di-rule);
}

.di-map .di-map__chooser .di-map__type {
	color: var(--di-brown);
}

.di-map .di-map__chooser .di-map__num {
	color: var(--di-ink-muted);
}

.di-map .di-map__chooser .di-map__name {
	font-size: 19px;
}

.di-map .di-map__chooser .di-map__item.is-selected {
	background: var(--di-brown);
	color: var(--di-on-brown);
}

.di-map .di-map__chooser .di-map__item.is-selected .di-map__type,
.di-map .di-map__chooser .di-map__item.is-selected .di-map__num {
	color: var(--di-on-brown-muted);
}

.di-map .di-map__chooser.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.di-map .di-map__chooser.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.di-map .di-map__chooser.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
	border-bottom-color: var(--di-ivory);
}

.di-map .di-map__chooser.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.di-map .di-map__chooser.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.di-map .di-map__chooser.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
	border-top-color: var(--di-ivory);
}

.di-map .di-map__chooser.maplibregl-popup-anchor-left .maplibregl-popup-tip {
	border-right-color: var(--di-ivory);
}

.di-map .di-map__chooser.maplibregl-popup-anchor-right .maplibregl-popup-tip {
	border-left-color: var(--di-ivory);
}

/* ---------- Basemap states (loading / error) ---------- */

.di-map .di-map__state {
	position: absolute;
	z-index: 3;
}

.di-map .di-map__state.is-loading {
	top: 14px;
	left: 14px;
	pointer-events: none;
}

.di-map .di-map__state-loading {
	padding: 6px 14px;
	border: 1px solid var(--di-rule);
	border-radius: 999px;
	background: var(--di-ivory);
	color: var(--di-ink-muted);
	font-size: 12px;
}

.di-map .di-map__state.is-error {
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--di-ivory);
}

.di-map .di-map__state-box {
	width: 100%;
	max-width: 380px;
}

.di-map .di-map__state-box .di-map__kicker {
	color: var(--di-brown);
}

.di-map .di-map__state-title {
	margin-top: 12px;
	font-family: var(--di-font-display);
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.di-map .di-map__state-text {
	margin-top: 12px;
	color: var(--di-ink-muted);
	font-size: 15px;
	line-height: 1.55;
}

.di-map .di-map__retry {
	margin-top: 20px;
	padding: 13px 26px;
	border-radius: 999px;
	background: var(--di-brown);
	color: var(--di-white);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ---------- Notice (dev mode without API key) ---------- */

.di-map .di-map__notice {
	position: absolute;
	left: 14px;
	bottom: 44px;
	z-index: 2;
	max-width: calc(100% - 28px);
	padding: 6px 14px;
	border: 1px solid var(--di-rule);
	border-radius: 999px;
	background: var(--di-ivory);
	font-size: 12px;
}

/* ---------- Map controls: compact, round, brown icons ---------- */

.di-map .maplibregl-map {
	font-family: var(--di-font-body);
}

.di-map .maplibregl-ctrl-top-right {
	top: 14px;
	right: 14px;
}

.di-map .maplibregl-ctrl-top-right .maplibregl-ctrl {
	margin: 0 0 8px;
}

.di-map .maplibregl-ctrl-group {
	overflow: hidden;
	border: 1px solid var(--di-rule);
	border-radius: 999px;
	background: var(--di-ivory);
	box-shadow: none;
}

.di-map .maplibregl-ctrl-group button {
	width: var(--di-ctrl-size);
	height: var(--di-ctrl-size);
	min-width: 0;  /* theme-proofing: common theme button rules */
	min-height: 0;
	margin: 0;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--di-brown);
	text-transform: none;
}

.di-map .maplibregl-ctrl-group button + button {
	border-top: 1px solid var(--di-rule);
}

/* Own icons (brown, thin strokes) instead of MapLibre's grey ones. */
.di-map .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
.di-map .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
.di-map .di-map__ctrl-icon {
	display: block;
	width: 100%;
	height: 100%;
	background: currentColor;
	-webkit-mask: var(--di-icon) center / 18px 18px no-repeat;
	mask: var(--di-icon) center / 18px 18px no-repeat;
}

.di-map .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
	--di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

.di-map .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
	--di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

.di-map .di-map__ctrl-icon--reset {
	--di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

.di-map .di-map__ctrl-icon--geo {
	--di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

.di-map .di-map__geo.is-active .di-map__ctrl-icon--geo,
.di-map .di-map__geo.is-searching .di-map__ctrl-icon--geo {
	--di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23000'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

/* Active location: brown button, ivory icon. */
.di-map .maplibregl-ctrl-group .di-map__geo.is-active,
.di-map .maplibregl-ctrl-group .di-map__geo.is-searching,
.di-map .maplibregl-ctrl-group .di-map__geo.is-active:hover,
.di-map .maplibregl-ctrl-group .di-map__geo.is-searching:hover {
	background: var(--di-brown);
	color: var(--di-ivory);
}

@media (hover: hover) {
	.di-map .maplibregl-ctrl-group button:not(:disabled):not(.is-active):not(.is-searching):hover {
		background-color: var(--di-white);
	}
}

/* ---------- Attribution strip under the map (logo left, text right) ---------- */

.di-map .di-map__attribution {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 30px;
	padding: 5px 14px;
	background: var(--di-brown); /* dark strip: MapTiler's logo is designed for dark backgrounds */
}

.di-map .di-map__attribution .maplibregl-ctrl-attrib {
	margin: 0 0 0 auto;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--di-on-brown);
	font-family: var(--di-font-body);
	font-size: 10px;
	line-height: 1.4;
	text-align: right;
}

.di-map .di-map__attribution .maplibregl-ctrl-attrib a {
	color: var(--di-on-brown);
}

.di-map .di-map__logo {
	display: block;
	flex: 0 0 auto;
}

.di-map .di-map__logo img {
	display: block;
	width: 67px;
	height: 20px;
}

.di-map.is-map-failed .di-map__logo {
	display: none;
}

.di-map .maplibregl-cooperative-gesture-screen {
	background: rgba(116, 85, 57, 0.78);
	color: var(--di-ivory);
	font-family: var(--di-font-body);
	font-size: 15px;
}