/* PSI Technician Map — stylesheet */

/* ------------------------------------------------------------------
   Outer wrapper — remove default page padding from the theme
   ------------------------------------------------------------------ */
#psi-techmap-wrap {
	display:        flex;
	flex-direction: column;
	width:          100%;
	min-height:     calc(100vh - 80px); /* leave room for sticky header */
	margin:         0;
	padding:        0;
}

/* ------------------------------------------------------------------
   Filter toolbar
   ------------------------------------------------------------------ */
#psi-techmap-toolbar {
	display:         flex;
	align-items:     center;
	gap:             8px;
	padding:         10px 16px;
	background:      #fff;
	border-bottom:   1px solid #e0e0e0;
	flex-shrink:     0;
	flex-wrap:       wrap;
}

.psi-techmap-label {
	font-size:   14px;
	color:       #555;
	font-weight: 500;
	margin-right: 4px;
}

.psi-techmap-btn {
	padding:          6px 18px;
	border:           2px solid #ccc;
	border-radius:    20px;
	background:       #fff;
	color:            #333;
	font-size:        14px;
	font-weight:      500;
	cursor:           pointer;
	transition:       background 0.2s, border-color 0.2s, color 0.2s;
	font-family:      inherit;
}

.psi-techmap-btn:hover {
	border-color: #e8251a;
	color:        #e8251a;
}

.psi-techmap-btn.active {
	background:   #e8251a;
	border-color: #e8251a;
	color:        #fff;
}

/* ------------------------------------------------------------------
   Map canvas — fills remaining viewport height
   ------------------------------------------------------------------ */
#psi-techmap-map {
	flex:        1 1 auto;
	width:       100%;
	min-height:  85vh;
	z-index:     0;
}

/* ------------------------------------------------------------------
   Count badge below map
   ------------------------------------------------------------------ */
#psi-techmap-province {
	padding:       6px 10px;
	border:        1px solid #ccc;
	border-radius: 6px;
	font-size:     14px;
	cursor:        pointer;
	background:    #fff;
	min-width:     130px;
}

#psi-techmap-province:focus {
	outline:      none;
	border-color: #1a6fe8;
}

#psi-techmap-count {
	padding:     6px 16px;
	font-size:   13px;
	color:       #666;
	background:  #f7f7f7;
	border-top:  1px solid #e0e0e0;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------
   Custom pin icon
   ------------------------------------------------------------------ */
.psi-techmap-icon {
	background: transparent !important;
	border:     none !important;
}

.psi-pin {
	width:         0;
	height:        0;
	border-left:   12px solid transparent;
	border-right:  12px solid transparent;
	border-top:    32px solid #e8251a;
	position:      relative;
}

.psi-pin::after {
	content:       '';
	position:      absolute;
	top:           -36px;
	left:          -8px;
	width:         16px;
	height:        16px;
	background:    #fff;
	border:        3px solid #e8251a;
	border-radius: 50%;
}

/* ------------------------------------------------------------------
   Popup content
   ------------------------------------------------------------------ */
.psi-popup {
	font-size:   14px;
	line-height: 1.3;
	min-width:   160px;
	text-align:  left;
}

.psi-popup-icon {
	display:    block;
	width:      56px;
	height:     56px;
	object-fit: contain;
	margin:     0 0 8px 0;
}

.psi-popup strong {
	display:     block;
	font-size:   15px;
	color:       #111;
	margin-bottom: 4px;
}

.psi-popup .psi-popup-branch {
	color:       #555;
	font-size:   13px;
}

.psi-popup a {
	color:           #1a6fe8;
	text-decoration: none;
	font-weight:     700;
}

.psi-popup a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------
   Responsive — ensure map fills screen on mobile
   ------------------------------------------------------------------ */
@media ( max-width: 768px ) {
	#psi-techmap-map {
		min-height: 85vh;
	}

	.psi-techmap-btn {
		padding:   5px 14px;
		font-size: 13px;
	}
}