/**
 * SF Beer Week - Interactive Map Styles
 *
 * Full-viewport Leaflet map with custom marker dots (region-colored),
 * popup venue cards, mode tabs, and responsive adjustments.
 */

/* =============================================
   Full-Viewport Map Layout
   ============================================= */

.map-page #content {
	padding-bottom: 0 !important;
	background-color: #55575B;
}

.map-page .container-fluid {
	padding: 0;
}

.map-page footer {
	display: none;
}

#sfbw-map {
	height: calc(100vh - 160px);
	width: 100%;
	z-index: 1;
	background-color: #e8e8e8;
}

/* =============================================
   Filter Bar
   ============================================= */

.map-filter-bar {
	background-color: #eee;
	padding: 0.5rem 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
	border-bottom: 3px solid #EEA31B;
}

/* Region Button Group — matches /activities and /participants style */
.map-region-group .map-region-btn {
	font-size: 16px;
	padding: 0.375rem 0.75rem;
	font-weight: 400;
	text-transform: uppercase;
}

/* ALL button — always gray filled */
.map-region-group .btn-all {
	background-color: rgb(108, 117, 125) !important;
	border-color: rgb(108, 117, 125) !important;
	color: #fff !important;
}

/* Active region — gray overrides region color (.btn-sf etc.) */
.map-region-group .map-region-btn.active {
	background-color: rgb(108, 117, 125) !important;
	border-color: rgb(108, 117, 125) !important;
	color: #fff !important;
}

.map-region-group .map-region-btn:hover {
	opacity: 0.85;
}

/* Filter Dropdowns — Date/Type selectors matching /dayguides style */
.map-filter-bar .map-filter-dropdown .dropdown-toggle {
	display: flex;
	align-items: stretch;
	height: 38px;
	padding: 0;
	border: 1px solid #ccc;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	cursor: pointer;
}

.map-filter-bar .map-filter-dropdown .dropdown-toggle::after {
	display: none;
}

.map-filter-bar .map-filter-dropdown .filter-label {
	display: flex;
	align-items: center;
	padding: 0 12px;
	background-color: #666;
	color: #fff;
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
}

.map-filter-bar .map-filter-dropdown .filter-value {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-grow: 1;
	padding: 0 12px;
	font-weight: 600;
	font-size: 1rem;
	color: rgb(224, 132, 51);
	white-space: nowrap;
}

.map-filter-bar .map-filter-dropdown .filter-value::after {
	content: "\f078";
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	font-size: 0.7rem;
	margin-left: 8px;
	color: #999;
}

.map-filter-bar .map-filter-dropdown .dropdown-menu {
	border-radius: 4px;
	padding: 0.25rem 0;
	box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

.map-filter-bar .map-filter-dropdown .dropdown-item {
	position: relative;
	padding: 0.5rem 1rem 0.5rem 2.5rem;
	font-weight: 600;
	font-size: 0.95rem;
}

.map-filter-bar .map-filter-dropdown .dropdown-item .text-muted {
	font-weight: 400;
	font-size: 0.85rem !important;
}

.map-filter-bar .map-filter-dropdown .dropdown-item.active {
	background-color: transparent;
	color: rgb(224, 132, 51);
}

.map-filter-bar .map-filter-dropdown .dropdown-item.active::before {
	content: "\f00c";
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	font-size: 0.75rem;
	color: #666;
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
}

.map-filter-bar .map-filter-dropdown .dropdown-item:hover {
	background-color: #f8f9fa;
}

/* Meta Count */
.map-meta {
	color: #999;
	font-size: 0.75rem;
	margin-left: auto;
	white-space: nowrap;
}

/* =============================================
   Map Footer
   ============================================= */

.map-footer {
	background-color: #55575B;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.7rem;
	text-align: center;
	padding: 0.35rem 0.75rem;
	letter-spacing: 0.2px;
}

.map-footer-sep {
	margin: 0 0.4rem;
	opacity: 0.4;
}

/* =============================================
   Leaflet Marker Dots (Custom divIcon)
   ============================================= */

.sfbw-marker {
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	transition: transform 0.15s;
	position: relative;
}

.sfbw-marker:hover {
	transform: scale(1.3);
	z-index: 1000 !important;
}

/* Region colors */
.sfbw-marker.region-sf { background-color: #EEA31B; }
.sfbw-marker.region-eb { background-color: #af95a6; }
.sfbw-marker.region-nb { background-color: #a3a983; }
.sfbw-marker.region-sv { background-color: #e08433; }
.sfbw-marker.region-co { background-color: #91b6bb; }

/* Count badge for multi-item venues */
.sfbw-marker-count {
	position: absolute;
	top: -6px;
	right: -6px;
	background-color: #444649;
	color: #fff;
	font-size: 9px;
	font-weight: 600;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: 1px solid #fff;
}

/* =============================================
   Leaflet Tooltip (Bootstrap-style)
   ============================================= */

.sfbw-tooltip.leaflet-tooltip {
	background-color: rgba(0, 0, 0, 0.85);
	color: #fff;
	border: none;
	border-radius: 0.25rem;
	padding: 0.3rem 0.55rem;
	font-family: "brandon-grotesque", sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.3;
	box-shadow: none;
	white-space: nowrap;
	max-width: none;
}

/* Arrow — dark to match background */
.sfbw-tooltip.leaflet-tooltip-top::before {
	border-top-color: rgba(0, 0, 0, 0.85);
}

.sfbw-tooltip.leaflet-tooltip-bottom::before {
	border-bottom-color: rgba(0, 0, 0, 0.85);
}

.sfbw-tooltip.leaflet-tooltip-left::before {
	border-left-color: rgba(0, 0, 0, 0.85);
}

.sfbw-tooltip.leaflet-tooltip-right::before {
	border-right-color: rgba(0, 0, 0, 0.85);
}

/* =============================================
   Leaflet Popup Card
   ============================================= */

.leaflet-popup-content-wrapper {
	border-radius: 0.375rem;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.leaflet-popup-content {
	margin: 0;
	min-width: 240px;
	max-width: 300px;
}

/* =============================================
   AJAX Activity Cards in Popups (dayguide/calendar/itinerary)
   Renders server-side activity_card.php partials inside Leaflet popups
   ============================================= */

/* Wider popup for rich activity cards */
.sfbw-popup-cards .leaflet-popup-content {
	min-width: 340px;
	max-width: 380px;
}

/* Container for AJAX-loaded activity cards */
.sfbw-map-cards {
	max-height: 420px;
	overflow-y: auto;
	overflow-x: hidden;
}

/* Loading state */
.sfbw-map-cards-loading {
	padding: 1.5rem 2rem;
	text-align: center;
	color: #888;
	font-size: 0.85rem;
}

/* Override Bootstrap .col inside popup — full width, no padding */
.sfbw-map-cards .col {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
	padding: 0;
}

/* Card adjustments for popup context
   Using div.card element selectors to match/beat specificity
   from participants.css and activities.css */
.sfbw-map-cards div.card {
	border-radius: 0;
	box-shadow: none !important;
	border: none;
	border-bottom: 1px solid #eee;
	cursor: pointer;
}

.sfbw-map-cards .col:last-child div.card {
	border-bottom: none;
}

/* Disable image zoom on hover inside popup */
.sfbw-map-cards div.card:hover div.card-img-top div.img {
	transform: none;
}

/* Marquee image — shorter aspect ratio for popup */
.sfbw-map-cards div.card div.card-img-top {
	border-radius: 0;
}

/* Keep standard 16x9 ratio — matches grid pages */

/* Compact card body — must beat div.card div.card-body */
.sfbw-map-cards div.card div.card-body {
	flex-direction: row !important;
	display: flex !important;
	padding: 0 !important;
}

/* Smaller date slate — must beat div.card div.slate */
.sfbw-map-cards div.card div.slate {
	width: 3.8rem !important;
	min-height: 4rem !important;
	font-size: 1rem;
	border-right-width: 0.25rem;
}

.sfbw-map-cards div.card div.slate > span {
	font-size: 1.2em;
}

/* Caption — must beat div.card div.caption */
.sfbw-map-cards div.card div.caption {
	width: calc(100% - 6.5rem) !important;
	padding: 0.3rem 0.4rem 0.2rem !important;
}

.sfbw-map-cards div.card div.caption .card-title {
	font-size: 0.78rem;
	margin-bottom: 0.1rem;
	line-height: 1.15;
	white-space: nowrap !important;
	height: auto;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sfbw-map-cards div.card div.caption .card-text {
	font-size: 0.68rem;
	line-height: 1.2;
	height: auto;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.sfbw-map-cards div.card div.caption .card-loc {
	font-size: 0.68rem;
	margin-top: 0.15rem;
}

.sfbw-map-cards div.card div.caption .card-loc i {
	font-size: 0.7rem !important;
}

/* Controls (bookmark, featured star) — must beat div.card div.controls */
.sfbw-map-cards div.card div.controls {
	width: 2rem !important;
	min-width: 2rem !important;
	padding-top: 0.3rem !important;
	font-size: 1rem;
}

/* Time badge — must beat div.card div.card-img-top.ratio > span.acts.times */
.sfbw-map-cards div.card div.card-img-top.ratio > span.acts.times {
	width: 3.8rem !important;
	font-size: 0.9rem;
	padding: 2px 4px 1px;
	border-right-width: 0.25rem;
}

/* =============================================
   Map Loading + Empty States
   ============================================= */

.map-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 500;
	background: rgba(255, 255, 255, 0.9);
	padding: 1rem 2rem;
	border-radius: 0.375rem;
	font-size: 0.85rem;
	color: #444649;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.map-empty {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 500;
	text-align: center;
	background: rgba(255, 255, 255, 0.95);
	padding: 1.5rem 2rem;
	border-radius: 0.375rem;
	font-size: 0.85rem;
	color: #666;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	display: none;
}

.map-empty i {
	font-size: 1.5rem;
	color: #ccc;
	margin-bottom: 0.5rem;
	display: block;
}

/* Participant card slate — white bg with logo (not dark gray date)
   Target slates containing images (logos) rather than .cLink,
   because openCardsInNewTab() strips .cLink from popup cards */
.sfbw-map-cards div.card div.slate:has(img) {
	background-color: #fff !important;
	border-right: none !important;
	padding: 0.25rem !important;
}

.sfbw-map-cards div.card div.slate:has(img) img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* Participant card caption — wider since no date slate border */
.sfbw-map-cards div.card div.caption .card-text {
	height: auto;
}

/* =============================================
   Leaflet Control Overrides
   ============================================= */

.leaflet-control-zoom a {
	color: #444649 !important;
}

.leaflet-control-attribution {
	font-size: 9px !important;
}

/* =============================================
   Responsive
   ============================================= */

@media (max-width: 767.98px) {
	#sfbw-map {
		height: calc(100vh - 185px);
	}

	.map-filter-bar .map-region-group {
		order: 0;
	}

	.map-filter-bar::before {
		content: '';
		flex-basis: 100%;
		order: 1;
	}

	.map-filter-bar .map-filter-dropdown,
	.map-filter-bar .map-meta {
		order: 2;
	}

	.sfbw-popup-cards .leaflet-popup-content {
		min-width: 280px;
		max-width: 320px;
	}

	.sfbw-map-cards {
		max-height: 320px;
	}

	.map-meta {
		display: none;
	}

	.map-footer {
		font-size: 0.6rem;
		padding: 0.25rem 0.5rem;
	}

	.map-region-group .map-region-btn {
		font-size: 14px;
		padding: 0.25rem 0.5rem;
	}

	.map-filter-bar .map-filter-dropdown .dropdown-toggle {
		height: 34px;
	}

	.map-filter-bar .map-filter-dropdown .filter-label {
		font-size: 0.75rem;
		padding: 0 8px;
	}

	.map-filter-bar .map-filter-dropdown .filter-value {
		font-size: 0.85rem;
		padding: 0 8px;
	}
}

@media (max-width: 575.98px) {
	#sfbw-map {
		height: calc(100vh - 190px);
	}

	.map-filter-bar {
		padding: 0.35rem 0.5rem;
		gap: 0.35rem;
	}

	.map-region-group .map-region-btn {
		font-size: 12px;
		padding: 0.2rem 0.4rem;
	}

	.map-filter-bar .map-filter-dropdown .dropdown-toggle {
		height: 30px;
	}

	.map-filter-bar .map-filter-dropdown .filter-label {
		font-size: 0.7rem;
		padding: 0 6px;
	}

	.map-filter-bar .map-filter-dropdown .filter-value {
		font-size: 0.8rem;
		padding: 0 6px;
	}
}