/**
 * rfs-map-popup.css
 *
 * Fixes the broken/inconsistent map marker popups (claude-code-fix-map-listing-popups.md,
 * 2026-09-27). Root causes found in the theme's own CSS:
 *   1. assets/dist/maps/mapbox/mapbox.css sets
 *      .mapboxgl-popup-content{width:300px;height:200px;padding:0;overflow:hidden}
 *      while assets/dist/frontend.css separately sets
 *      .mapboxgl-popup-content{height:auto} - a genuine conflicting-rule bug; which
 *      one wins depends on stylesheet load order, which is why different popups
 *      looked differently broken.
 *   2. Popup content was previously wrapped in the theme's own
 *      .lf-item-container.lf-type-2 markup, which carries
 *      ".lf-type-2 .lf-item{height:230px}" from explore-widget.css - a fixed height
 *      meant for a horizontal row in a results list, not a compact map popup.
 * rfs-explore-full-map.js no longer uses that wrapper at all (see its own comments) -
 * this file only needs to (a) neutralise the two conflicting rules above so nothing
 * fights the new template, and (b) style the new .rfs-marker-popup template itself.
 */

/* --- Neutralise the theme's own conflicting/undersized popup container rules --- */
.mapboxgl-popup-content {
	width: auto !important;
	height: auto !important;
	max-height: 80vh !important;
	padding: 0 !important;
	overflow: visible !important;
	border-radius: 10px !important;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18) !important;
}

/*
 * The theme's own mapbox popup wrapper (assets/dist/maps/mapbox/mapbox.js)
 * hardcodes closeButton:false when constructing the underlying mapboxgl.Popup,
 * so there is no native .mapboxgl-popup-close-button to style - a custom close
 * control (.rfs-marker-popup__close, wired up in rfs-explore-full-map.js via
 * the theme's own Popup.hide() method) replaces it.
 */

/* --- The popup card itself --- */
.rfs-marker-popup {
	position: relative;
	display: block;
	width: 280px;
	max-width: calc(100vw - 48px);
	max-height: 80vh;
	overflow: hidden;
	background: #fff;
	border-radius: 10px;
}

.rfs-marker-popup__close {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rfs-marker-popup__close:hover {
	background: rgba(0, 0, 0, 0.75);
}

.rfs-marker-popup__link {
	display: block;
	max-height: 80vh;
	overflow-y: auto;
	text-decoration: none;
	color: inherit;
}

.rfs-marker-popup__image-wrap {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #eef1f5;
	overflow: hidden;
	border-radius: 10px 10px 0 0;
}

.rfs-marker-popup__image-wrap--fallback {
	background-image: url('https://restaurantsforsale.uk/wp-content/uploads/2026/06/rfs-roundel-180-150x150.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 72px 72px;
}

.rfs-marker-popup__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rfs-marker-popup__body {
	padding: 10px 14px 14px;
}

.rfs-marker-popup__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: #1a1a1a;
	margin: 0 0 4px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rfs-marker-popup__price {
	font-size: 14px;
	font-weight: 700;
	color: #0A63CB;
	margin: 0;
}

@media (max-width: 480px) {
	.rfs-marker-popup {
		width: min(300px, calc(100vw - 48px));
	}
}