/* Consortium partner map: logo-as-pin Leaflet markers, shared by the Data
   Governance dashboard and the public welcome/login page. Behaviour lives in
   /js/sqat-partner-map.js. */

.sqat-partner-map-popup-logo {
	display: block;
	max-height: 3rem;
	max-width: 8rem;
	object-fit: contain;
	margin-bottom: 0.5rem;
}

/* Logo-as-pin markers: a rounded speech-bubble badge holding the whole
   logo, with a pointed tail whose tip sits on the office coordinate. */
.sqat-partner-pin {
	position: relative;
}

.sqat-partner-pin--down,
.sqat-partner-pin--up {
	height: 64px;
	width: 72px;
}

.sqat-partner-pin--left,
.sqat-partner-pin--right {
	height: 48px;
	width: 88px;
}

.sqat-partner-pin-badge {
	align-items: center;
	background: #fff;
	border: 2px solid var(--bs-gray-600, #6c757d);
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	box-sizing: border-box;
	display: flex;
	height: 48px;
	justify-content: center;
	left: 0;
	padding: 4px;
	position: absolute;
	top: 0;
	width: 72px;
}

.sqat-partner-pin--up .sqat-partner-pin-badge {
	top: 16px;
}

.sqat-partner-pin--left .sqat-partner-pin-badge {
	left: 16px;
}

/* Size to the badge content box with width/height (not max-width) —
   Leaflet forces `max-width: none !important` on marker-pane images,
   so explicit dimensions plus object-fit are what actually constrain.
   min-width: 0 lets the flex item shrink below the logo's intrinsic
   width; without it wide logos burst out the sides of the badge. */
.sqat-partner-pin-badge img {
	display: block;
	height: 100%;
	min-width: 0;
	object-fit: contain;
	width: 100%;
}

/* Two stacked triangles draw an outlined tail: the larger one in the
   border colour, the smaller white one sits on top to leave an edge. */
.sqat-partner-pin::before,
.sqat-partner-pin::after {
	content: '';
	height: 0;
	position: absolute;
	width: 0;
}

.sqat-partner-pin--down::before {
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-top: 16px solid var(--bs-gray-600, #6c757d);
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.sqat-partner-pin--down::after {
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 12px solid #fff;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
}

.sqat-partner-pin--up::before {
	border-bottom: 16px solid var(--bs-gray-600, #6c757d);
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
}

.sqat-partner-pin--up::after {
	border-bottom: 12px solid #fff;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	left: 50%;
	top: 4px;
	transform: translateX(-50%);
}

.sqat-partner-pin--left::before {
	border-bottom: 9px solid transparent;
	border-right: 16px solid var(--bs-gray-600, #6c757d);
	border-top: 9px solid transparent;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.sqat-partner-pin--left::after {
	border-bottom: 7px solid transparent;
	border-right: 12px solid #fff;
	border-top: 7px solid transparent;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
}

.sqat-partner-pin--right::before {
	border-bottom: 9px solid transparent;
	border-left: 16px solid var(--bs-gray-600, #6c757d);
	border-top: 9px solid transparent;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.sqat-partner-pin--right::after {
	border-bottom: 7px solid transparent;
	border-left: 12px solid #fff;
	border-top: 7px solid transparent;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
}