/* Mirna Travel -- Car Results map (mirna-car-map.js + mirna-car-results-map.js).
   Desktop (>=1100px): list + map column (not sticky; scrolls with the page). Below: hidden column, a
   "Show map" control opens it full screen. Logical properties -> RTL-safe. */

/* ---------- layout around the existing cards ---------- */
.mirna-car-map-toggle {
	display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px;
	border: 1px solid #bfdbfe; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer;
}
.mirna-car-card { cursor: pointer; }
.mirna-car-card.is-map-active { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .35), 0 10px 28px rgba(15, 23, 42, .1); }

/* ---------- panel ---------- */
.mirna-car-map { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(15, 23, 42, .06); }
.mirna-car-map__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #eef2f7; font-size: .9rem; color: #0f172a; }
.mirna-car-map__close { width: 36px; height: 36px; border: 0; border-radius: 10px; background: #f1f5f9; color: #0f172a; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.mirna-car-map__canvas { position: relative; flex: 1; min-height: 0; }
.mirna-car-map__legend { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid #eef2f7; font-size: .75rem; font-weight: 700; color: #475569; }
.mirna-car-map__legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; border-radius: 50%; vertical-align: -1px; }
.mirna-car-map__legend .is-pickup::before { background: #1d4ed8; }
.mirna-car-map__legend .is-dropoff::before { background: #fff; border: 2px solid #f97316; }
.mirna-car-map__preview {
	position: absolute; inset-inline: 12px; bottom: 52px; z-index: 5; display: flex; align-items: center; gap: 10px;
	padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, .22); font-size: .85rem;
}
.mirna-car-map__preview[hidden] { display: none; }
.mirna-car-map__preview div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mirna-car-map__preview div span { color: #64748b; font-size: .78rem; }
.mirna-car-map__preview b { color: #0f172a; white-space: nowrap; }
.mirna-car-map__preview button { padding: 8px 12px; border: 0; border-radius: 10px; background: #1d4ed8; color: #fff; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }

/* ---------- provider-neutral controller ---------- */
.mirna-cmap { position: absolute; inset: 0; overflow: hidden; background: #e8eef5; direction: ltr; }
.mirna-cmap.is-fullscreen { position: fixed; z-index: 100001; }
.mirna-cmap__canvas { position: absolute; inset: 0; }
.mirna-cmap__controls { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 4; display: flex; flex-direction: column; gap: 8px; }
.mirna-cmap__group { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 4px 14px rgba(15, 23, 42, .16); }
.mirna-cmap__btn { display: grid; place-items: center; width: 38px; height: 38px; border: 0; background: #fff; color: #0f172a; cursor: pointer; }
.mirna-cmap__btn + .mirna-cmap__btn { border-top: 1px solid #eef2f7; }
.mirna-cmap__btn:hover { background: #f1f5f9; }
.mirna-cmap__modes button { width: 38px; height: 32px; border: 0; background: #fff; color: #64748b; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.mirna-cmap__modes button[aria-pressed="true"] { background: #1d4ed8; color: #fff; }
.mirna-cmap__badge { position: absolute; bottom: 10px; inset-inline-start: 10px; z-index: 4; max-width: calc(100% - 20px); padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #475569; font-size: .7rem; font-weight: 700; }

/* ---------- 'maplibre' adapter (OpenFreeMap basemap) ---------- */
/* Higher specificity than maplibre-gl.css's .maplibregl-map { position: relative } (loaded later). */
.mirna-cmap-maplibre, .mirna-cmap-maplibre.maplibregl-map { position: absolute; inset: 0; }
.mirna-cmap-maplibre .mirna-cmap-marker { position: absolute; }
.mirna-cmap-maplibre .maplibregl-ctrl-attrib { font-size: 11px; }

/* ---------- built-in local (no-network) adapter ---------- */
.mirna-cmap-local { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; perspective: 900px; user-select: none; }
.mirna-cmap-local.is-dragging { cursor: grabbing; }
.mirna-cmap-local__stage { position: absolute; inset: 0; transform-origin: 50% 60%; transition: transform .35s ease; }
.mirna-cmap-local.is-3d .mirna-cmap-local__stage { transform: rotateX(42deg) scale(1.35); }
.mirna-cmap-local__surface {
	position: absolute; inset: -60%;
	background-color: #eef3f8;
	background-image:
		linear-gradient(rgba(148, 163, 184, .35) 2px, transparent 2px),
		linear-gradient(90deg, rgba(148, 163, 184, .22) 1px, transparent 1px),
		linear-gradient(rgba(148, 163, 184, .22) 1px, transparent 1px);
}
.mirna-cmap-local__markers { position: absolute; inset: 0; transform-style: preserve-3d; }
.mirna-cmap-marker {
	position: absolute; transform: translate(-50%, -100%); padding: 0; border: 0; background: none; cursor: pointer;
	transform-origin: 50% 100%; font: inherit; z-index: 1;
}
.mirna-cmap-local.is-3d .mirna-cmap-marker { transform: translate(-50%, -100%) rotateX(-42deg); }
.mirna-cmap-marker span {
	position: relative; display: block; padding: 5px 9px; border-radius: 999px; background: #1d4ed8; color: #fff;
	font-size: .78rem; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 12px rgba(15, 23, 42, .25);
}
.mirna-cmap-marker span::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); z-index: -1; }
.mirna-cmap-marker.is-cluster span { background: #0f172a; }
.mirna-cmap-marker.is-dropoff span { background: #fff; color: #c2410c; border: 2px solid #f97316; }
.mirna-cmap-marker.is-dropoff span::after { border-right: 2px solid #f97316; border-bottom: 2px solid #f97316; bottom: -6px; }
.mirna-cmap-marker.is-active { z-index: 3; }
.mirna-cmap-marker.is-active span { background: #f59e0b; color: #0f172a; transform: scale(1.12); }
.mirna-cmap-marker:focus-visible span { outline: 3px solid #93c5fd; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mirna-cmap-local__stage { transition: none; } }

/* ---------- responsive (last, so it wins over the base panel rules) ---------- */
@media (min-width: 1100px) {
	.mirna-car-results__layout.has-map { grid-template-columns: minmax(0, 1fr) minmax(340px, 38%); align-items: start; }
	.mirna-car-map { height: min(calc(100vh - 120px), 760px); }
	.mirna-car-map__close, .mirna-car-map-toggle { display: none !important; }
	/* Narrower list column beside the map: cards use their own tablet arrangement. */
	.has-map .mirna-car-card { grid-template-columns: 190px minmax(0, 1fr); }
	.has-map .mirna-car-card__price { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; border-inline-start: 0; border-top: 1px solid #eef2f7; text-align: start; }
	.has-map .mirna-car-card__price-label { flex-basis: 100%; }
	.has-map .mirna-car-card__select { width: auto; min-width: 160px; margin-top: 0; margin-inline-start: auto; }
}
@media (max-width: 1099px) {
	.mirna-car-map { display: none; }
	.mirna-car-map.is-open { display: flex; position: fixed; inset: 0; z-index: 100000; height: 100dvh; border-radius: 0; border: 0; }
	html.mirna-car-map-open, html.mirna-car-map-open body { overflow: hidden !important; }
}