/* OceanEye Spot Map
 *
 * Mobile first, same as oe-search.css: the base layer is the phone layout and a
 * single min-width block adds what a wider screen affords. Same light palette
 * and the same tokens, so the map and the search dropdown read as one system.
 *
 * The Elementor kit styles bare elements and out-specifies plain block classes —
 * it has caused three separate bugs in this plugin already (input background,
 * img radius, a:hover colour). Anything here that the kit is likely to reach
 * (img, button, a) is fenced by qualifying the element and anchoring through a
 * parent. Never !important.
 */

.oe-map {
	--oe-m-bg:      #ffffff;
	--oe-m-border:  #e2ddd4;
	--oe-m-text:    #1f2328;
	--oe-m-muted:   #6f6a63;
	--oe-m-accent:  #1853e9;
	--oe-m-premium: var(--oe-m-accent);

	position:    relative;
	width:       100%;
	font-family: inherit;
	color:       var(--oe-m-text);
}

/* ── Controls ─────────────────────────────────────────────────────────── */
.oe-map__bar {
	display:     flex;
	align-items: center;
	gap:         8px;
	flex-wrap:   wrap;
	margin-bottom: 10px;
}

.oe-map__chips {
	display:   flex;
	gap:       6px;
	flex-wrap: wrap;
	flex:      1;
}

.oe-map .oe-map__chip {
	appearance:      none;
	border:          1px solid var(--oe-m-border);
	background:      var(--oe-m-bg);
	color:           var(--oe-m-muted);
	border-radius:   999px;
	padding:         7px 14px;
	font-size:       0.8125rem;
	font-weight:     600;
	font-family:     inherit;
	cursor:          pointer;
	transition:      background-color .15s ease, color .15s ease, border-color .15s ease;
	-webkit-tap-highlight-color: transparent;
}

.oe-map .oe-map__chip:hover {
	color:        var(--oe-m-text);
	border-color: #c9c2b6;
}

.oe-map .oe-map__chip.is-active {
	background:   var(--oe-m-accent);
	border-color: var(--oe-m-accent);
	color:        #ffffff;
}

.oe-map .oe-map__near {
	appearance:      none;
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	border:          1px solid var(--oe-m-accent);
	background:      var(--oe-m-accent);
	color:           #ffffff;
	border-radius:   999px;
	padding:         7px 16px;
	font-size:       0.8125rem;
	font-weight:     600;
	font-family:     inherit;
	cursor:          pointer;
	-webkit-tap-highlight-color: transparent;
}

.oe-map .oe-map__near:disabled { opacity: .6; cursor: default; }
.oe-map .oe-map__near.is-busy  { opacity: .6; }

.oe-map__status {
	font-size:  0.8125rem;
	color:      var(--oe-m-muted);
	min-height: 1.2em;
	flex-basis: 100%;
}

/* ── The map itself ───────────────────────────────────────────────────── */
.oe-map__canvas {
	width:         100%;
	height:        70vh;
	min-height:    380px;
	border:        1px solid var(--oe-m-border);
	border-radius: 12px;
	overflow:      hidden;
	background:    #eef2f5;
}

/* ── Pins ─────────────────────────────────────────────────────────────── */
.oe-map .oe-map__pin {
	appearance:      none;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           16px;
	height:          16px;
	padding:         0;
	border:          2px solid #ffffff;
	border-radius:   50%;
	background:      var(--oe-m-accent);
	box-shadow:      0 1px 4px rgba(31, 35, 40, .35);
	cursor:          pointer;
	transition:      transform .12s ease;
	-webkit-tap-highlight-color: transparent;
}

.oe-map .oe-map__pin:hover,
.oe-map .oe-map__pin:focus-visible {
	transform: scale(1.25);
	outline:   none;
}

/* Premium pins are bigger and carry the barrel, so paid cams read at a glance. */
.oe-map .oe-map__pin.is-premium {
	width:      26px;
	height:     26px;
	background: var(--oe-m-premium);
}

.oe-map__pin .oe-barrel {
	width:  14px;
	height: 14px;
	color:  #ffffff;
}

/* ── Popup ────────────────────────────────────────────────────────────── */
.oe-map__popup {
	display: flex;
	gap:     10px;
	align-items: flex-start;
	min-width: 200px;
}

.oe-map .oe-map__popup img.oe-map__popup-thumb {
	flex-shrink:   0;
	width:         64px;
	height:        48px;
	object-fit:    cover;
	border-radius: 8px;
	background:    #efeae1;
}

.oe-map__popup-body {
	display:        flex;
	flex-direction: column;
	gap:            2px;
	min-width:      0;
}

.oe-map .oe-map__popup-body a.oe-map__popup-name {
	font-size:       0.9375rem;
	font-weight:     700;
	color:           var(--oe-m-text);
	text-decoration: none;
	line-height:     1.25;
}

.oe-map .oe-map__popup-body a.oe-map__popup-name:hover {
	color: var(--oe-m-accent);
}

.oe-map__popup-meta {
	font-size: 0.75rem;
	color:     var(--oe-m-muted);
}

.oe-map__popup-premium {
	display:     inline-flex;
	align-items: center;
	color:       var(--oe-m-premium);
	margin-top:  2px;
}

.oe-map__popup-premium .oe-barrel { width: 13px; height: 13px; }

.oe-map .oe-map__popup-body a.oe-map__popup-cta {
	margin-top:      6px;
	font-size:       0.8125rem;
	font-weight:     600;
	color:           var(--oe-m-accent);
	text-decoration: none;
}

/* ── Fallback, when there is no token, no data, or no network ─────────── */
.oe-map__fallback {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	gap:            10px;
	min-height:     280px;
	padding:        24px;
	border:         1px dashed var(--oe-m-border);
	border-radius:  12px;
	color:          var(--oe-m-muted);
	text-align:     center;
	font-size:      0.9375rem;
}

.oe-map .oe-map__fallback a.oe-map__fallback-link {
	color:           var(--oe-m-accent);
	font-weight:     600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── Wider screens ────────────────────────────────────────────────────── */
@media (min-width: 601px) {
	.oe-map__canvas {
		height:     78vh;
		min-height: 480px;
	}

	.oe-map__status {
		flex-basis: auto;
		margin-left: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oe-map .oe-map__pin,
	.oe-map .oe-map__chip {
		transition: none;
	}
}

.oe-map .screen-reader-text {
	position: absolute;
	width:    1px;
	height:   1px;
	padding:  0;
	margin:   -1px;
	overflow: hidden;
	clip:     rect(0, 0, 0, 0);
	white-space: nowrap;
	border:   0;
}