/* Search bar */
.Group-Locator-Search-Container{
	display:flex;
	flex-direction:row;
	justify-content:center;
	margin:1.5% !important;
}

.Group-Locator-Search-Container button{
	background-color:var(--wp--preset--color--secondary) !important;
	color:white;	
	border-radius:0 !important;
	border-color:var(--bs-border-color) !important;
}

.Group-Locator-Search-Container button:hover{
	background-color:#003982 !important;
	color:white;
}

.Group-Locator-Search-Container .Group-Locator-Search-Spacer{
	flex:5%;
	flex-grow:2;
}

.Group-Locator-Search-Container label{
	flex:11%;
	color: white;
	font-weight:bold;
	text-align:right;
	margin-right:1%;
	margin-top:0.7%;
}

.Group-Locator-Search-Container input{
	flex:20%;
	flex-grow:3;
	border-radius:0 !important;
}

.Group-Locator-Search-Container button{
	flex:5%;
}


/* Map pop out */
.Group-Locator-Group-Title{
	color: #7413dc;
	font-weight:bold;
	font-size:large;
}

.Group-Locator-Age-Range{
	font-style:italic;
}

/* Map clusters */
.ssgf-custom-cluster-icon div{
	background-color: #088486 !important;
	color:white;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    line-height: 30px;
	overflow:hidden;
	box-shadow: 0 0 0 3px rgba(6,132,134,0.2); /* outer “gradient ring” */
}

/* Search results */
.group-locator-search-results .search-results-list {
	max-height: 500px;
	overflow-y: auto;
	padding-right: 15px;
}

.group-locator-search-results .search-results-list::-webkit-scrollbar {
	width: 8px;
}

.group-locator-search-results .search-results-list::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}

.group-locator-search-results .search-results-list::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 4px;
}

.group-locator-search-results .search-results-list::-webkit-scrollbar-thumb:hover {
	background: #555;
}

/* Cards for group results */
.ssgf-group-result-card {
	border:none;
	background-color: #F9F9F9;
	border-left: 8px solid #D1D3D4;
	border-radius: 0px;
	transition: all 0.2s ease;
}

.ssgf-group-result-card .card-title {
	color: #7413dc;
	font-weight: bold;
	font-size:1.2em;
	margin-top:0 !important;
	line-height:1.3em;
}

.distance-badge {
	background-color: #088486 !important;
	color: white;
	font-size: 0.8em !important;
	font-weight: 200 !important;
	padding: 0.4em 0.8em;
	border-radius:0;
}

.section-item {
	border-radius: 0;
	padding: 0.2em 0.5em;
	transition: background-color 0.2s ease;
}

.section-name {
	font-weight: 600;
	color: #003982;
	font-size: 0.8em;
	margin-bottom:0;
	line-height:0.8em;
}

.section-time {
	font-size: 0.7em;
	margin-top: 0.4em;
	line-height:0.7em;
}

.group-locator-search-results .container-fluid{
	padding-left:0;
}




/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
 
  .Group-Locator-Search-Container{
    flex-direction:column;
  }
  
  .Group-Locator-Search-Container label{
  	text-align:center;
  	}
}