.filter-legend .dot::before,
.tag.dot::before {
  background-color: var(--dot-color);
}
.container5 {
  max-width: 1100px;
  margin: 30px auto -15px auto;
  background: white;
  border-radius: 56px;
  padding: 40px;
  padding-top: 20px;
  position: relative; 
  display: block;
  overflow: hidden;   
  height: auto;
}
.price-header {
  display: flex;
  align-items: center;
  gap: 4px;
}
.price-tooltip p {
  margin: 0;
  margin-bottom: 4px;
}

.price-info {
  position: relative;
  display: inline-block;
}
.tooltip-space {
  display: inline-block;
  width: 1px; 
}

.price-icon-img {
  width: 26px;
  height: 26px;
  cursor: pointer;
  display: inline-block;
}

.price-tooltip {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%) translateX(-5px); /* изначально немного сдвинут */
  margin-left: 8px;
  width: 260px;
  padding: 10px 12px;
  background: white;
  color: #333;
  border-radius: 8px;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.15),
              3px -3px 8px rgba(0,0,0,0.1),
              0 3px 8px rgba(0,0,0,0.1);
  font-size: 12px;
  line-height: 1.35;

  opacity: 0;          
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 999;
  overflow: visible;
}


.price-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -7px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid white;
  z-index: 1000;
}


.price-info:hover .price-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0); 
}

@media (max-width: 768px) {
  .school-buttons,
  .school-aside .btn-contact,
  .school-aside .btn-favorite {
    display: none !important;
  }


.mobile-buttons-bottom {
  left: 0;
  padding: 10px 5%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff; 
  border-top: 1px solid #ddd; 
  z-index: 1000;
  align-items: center;
  border-radius: 8px 8px 0 0;
}

  .mobile-buttons-bottom .btn-contact,
  .mobile-buttons-bottom .btn-favorite {
    width: 100%; 
  }
.school-buttons,
.btn-contact,
btn-favorite
{
  display: none;
}
  .price-tooltip {
    top: 40px;            
    bottom: 100%;        
    left: 50%;           
    transform: translateX(-50%); 
    width: 90vw;           
    max-width: 260px;
    margin-left: 0;
  }

  .price-tooltip::after {
    top: 100%;           
    left: 50%;
    transform: translateX(-50%); 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid white; 
    border-bottom: none;
  }
}

.desktop-only {
  display: block;
}
.mobile-only {
  display: none;
}
.info-img5 {
  width: 26px;    
  height: 26px;
  vertical-align: middle;
  transition: filter 0.2s;
}

.info-icon5:hover .info-img5 {
  filter: invert(38%) sepia(93%) saturate(4393%) hue-rotate(199deg) brightness(95%) contrast(92%);
 
}
.tooltip5 {
  visibility: hidden;
  width: 294px;
  background-color: #fff;
  color: #000;
  text-align: left;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  top: 50%;
  left: 90%; 
  transform: translateY(-50%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  z-index: 10;
}


.tooltip5::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px; 
  transform: translateY(-50%);
width: 18px;   
  height: 22px; 
  background-color: #fff;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
}
.tooltip-linebreak {
  display: block;       
  margin-top: 8px;      
}

.info-icon5:hover .tooltip5 {
  visibility: visible;
}
@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;

  }
}
.mobile-only {
  position: relative;
}

.filter-button-mobile {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #fff;
  padding: 10px;
  height: 80px;
  border-top: 1px solid #E0E0E0;
  z-index: 10;
}


.mobile-only.has-elements .filter-button-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1100;
}
.filter-btn5 {
  background: #2196F3;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 48px;         
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  padding-left: 30px;
  margin-top: 5px;
  transition: transform 0.2s ease, background 0.2s ease; 
}

.filter-btn5:hover {
  transform: scale(1.02); 
}
.filter-btn5 .icon-left {
  position: absolute;
  margin-left: -90px;               
  height: 20px;        
  width: 20px;              
  object-fit: contain;
}

.close-btn5 {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
}
.title5 {
  font-size: 40px;
  color: #1565C0;
  font-weight: 500;
  font-style: normal;
  text-align: left;
  margin-top: 10px;
}

.hero-strong5 {
  font-family: 'Roboto Serif', serif !important;
  font-size: 40px;
  color: #1565C0;
  font-weight: 500;
  font-style: normal;
}

.arrow5 {
  position: absolute;
  top: 20px;
  right: 0;
  max-width: 402px;
  width: auto;
  height: auto;
  object-fit: contain;
 
}
.arrow-festival {
  position: absolute;
  top: 20px;
  right: 0;
  max-width: 340px;
  width: auto;
  height: auto;
  object-fit: contain;
 
}


.modal5 {
  position: relative;
  background: #F5F5F5;
  border-radius: 16px;
  padding: 24px;
  width: 590px;
  height: auto;
  max-height: none;
  align-self: flex-start; 
  display: block;
  padding-top: 10px;
}
.modal6 {
  position: relative;
  background: transparent;
  border-radius: 16px;
  padding: 24px;
  width: 590px;
  height: auto;
  max-height: none;
  align-self: flex-start; 
  display: block;
  padding-top: 10px;
}

.close-btn5 {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #212121;
}

.filters5 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.filters6 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.filter-group5 {
  position: relative;
  font-size: 16px;
  color: #212121;
}

.reset-btn5 {
  margin-top: 12px;
  padding: 5px 15px;
  border: 1px solid #2196F3;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  height: 48px;
  color: #2196F3;
  transition: transform 0.2s ease;
}

.reset-btn5:hover {
  transform: scale(1.05);
}

.filter-header5 label {
  font-size: 16px;
  font-weight: 500;
  position: relative;
  padding-right: 24px;
  display: inline-flex;
  align-items: center;
  margin: 10px 0; 
}
.filter-header5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.MuiSvgIcon-root.MuiSvgIcon-fontSizeSmall.css-vh810p {
  display: none !important;
}



.filter-header5 label .icon-but5 {
  width: 30px;
  height: 30px;
  margin-left: 8px;
  object-fit: contain;
  vertical-align: middle;
}

.filter-header5 button.icon-filter5 { 
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;  
  width: auto;
  height: auto;
  opacity: 1;  
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.selected-item {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  background: #fff;
  border-radius: 6px;
  font-size: 14px;
  margin-left: -3px;
  position: relative;
  transition: background 0.2s;
}


.filter-header5 button.icon-filter5 img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.MuiAutocomplete-input, 
.MuiOutlinedInput-input {
  background-color: transparent !important;
  border: none !important;
  margin-top: -8px; 
}


.dropdown-btn5 {
  width: 100%;
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  gap: 5px;
  height: 56px;
}

.dropdown-btn5 span.count5 {
  color: #757575;
  font-weight: 400;
  font-size: 16px;
  margin-left: -4px;
}

.dropdown-btn5 svg {
  margin-left: auto;
  width: 16px;
  height: 16px;
  transform: rotate(0deg);
  transition: transform 0.2s;
}

.filter-group5.open .dropdown-btn5 svg {
  transform: rotate(180deg);
}

.dropdown-btn5 .arrow6 {
  margin-left: auto;
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
  transform-origin: center;
}

.filter-group5.open .dropdown-btn5 .arrow6 {
  transform: rotate(180deg) scale(1.2);
}

.tags5 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.tag5 {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: default;
}

.tag5 span {
  margin-right: 6px;
}

.tag5 button {
  background: none;
  border: none;
  font-size: 12px;
  cursor: pointer;
  color: #555;
  padding: 0;
  line-height: 1;
}

.more-btn5 {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

.options5 {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #ffffff;
  border: 1px solid #F5F5F5;
  border-radius: 8px;
  margin-top: 4px;
  max-height: 150px;
  overflow-y: auto;
  display: none;
  z-index: 10;
}

.filter-group5.open .options5 {
  display: block;
}

.options5 li {
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
}

.options5 li:hover {
  background: #f0f0f0;
}

.submit-btn5 {
  margin-top: 20px;
  width: 100%;
  height: 48px;
  padding: 5px 15px; 
  background: #DEEAF2;
  border: none;
  border-radius: 8px;
  color: #AAC7DF;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer; 
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  transform: scale(1);
}

.submit-btn5.active {
  background: #2196F3;
  color: #ffffff;
}

.submit-btn5.active:hover {
  transform: scale(1.05);
}

/* временно убираем скрытие */
.submit-btn5:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.option-icon5 {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: middle;
}

.option-icon5 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tag5.dot5 {
  position: relative; 
  padding-left: 34px; 
}
.right-block5.grid-mode5 .school-card5 .tag5.dot5::before {
  position: absolute; 
  left: 6px;                  
  transform: translateY(-50%);
}
.dot5::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 50%;
  background-color: var(--dot-color);
}

.tag5.dot5::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--dot-color);
  margin-right: 6px;
  vertical-align: middle;
  position: absolute;  
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}


.filter-bar5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 16px; 
  flex-wrap: wrap;
  margin-top: -30px;
}

.filter-left5 {
  flex: 1;
  min-width: 80px;
  text-align: left;
  font-size: 20px;
  color: #212121;
  font-weight: 400;
  font-style: normal;
  margin-left: -15px; 
}

.filter-center5 {
  flex: 1;
  min-width: 150px;
  text-align: center;
  font-size: 20px;
  color: #212121;
  font-weight: 400;
  font-style: normal;
  margin-left: -90px; 
  
}

.filter-right5 {
  flex: 1;
  min-width: 138px;
  display: flex;              
  justify-content: flex-end;  
  align-items: center;       
  font-size: 12px !important;
  font-weight: 500;
 
}

.view-toggle5 {
  display: flex;
  align-items: center;        
  gap: 6px;
  background-color: #ffffff;
  border: 1px solid #2196F3;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
   font-size: 12px !important;
  font-weight: 500;
   min-width: auto;
   min-height: 40px;
   justify-content: center;
   transform: translateX(15px);
}
.MuiChip-label,
.MuiChip-labelMedium {
  border-radius: 8px; 
}
.MuiChip-root {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
.MuiInput-root.MuiInput-underline:before,
.MuiInput-root.MuiInput-underline:after {
  border-bottom: none !important;
}
.dropdown-btn5 .MuiAutocomplete-root,
.dropdown-btn5 .MuiFormControl-root {
  margin: 0;
  padding: 0;
}

.dropdown-btn5 .MuiInputBase-root {
  font-size: 14px;
  min-height: 30px; 
}

.dropdown-btn5 .MuiInputBase-root input {
  padding: 4px 6px;
  height: 30px;
  font-size: 14px;
}

.MuiChip-deleteIcon:hover {
  background-color: transparent !important; 
}

.view-toggle5 img {
  width: 20px;
  height: 20px;
}

.view-toggle5 span {
  color: #2196F3 !important;
  font-size: 16px;
  font-weight: 500;

}
.text-bottom {
  margin-top: auto; 
}

.school-card5 {
  background: #F5F5F5;
  border-radius: 16px;
  position: relative;
  padding: 10px 25px; 
  text-align: left;
  font-size: 14px;
  flex: 1;
  box-sizing: border-box;
  height: auto;
  margin-top: 0;
  margin-bottom: 20px;
  width: 640px;
  align-items: flex-start;
}


.right-block5 {
  max-width: 940px;
  width: 700px;
  margin: 0 auto;
}


.right-block5.grid-mode5 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}
.school-card5 {
  position: relative; 

}


.icon-button5 {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  transition: background-color 0.2s ease;
  z-index: 2; 
}


.right-block5.grid-mode5 .school-card5 {
  width: calc(50% - 6px);
  flex-grow: 0;           
  flex-shrink: 0;      
  flex-basis: calc(50% - 6px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}


.right-block5.grid-mode5 .school-card5:only-child {
  display: inline-flex;   
  width: 50%;      
  flex-basis: auto;
  align-self: flex-start;    
}


.right-block5.grid-mode5 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;              
}

.right-block5.grid-mode5 .school-card5 {
  margin-bottom: 0;    
}
.school-card5:hover {
  background-color: #ECF6FE; 
  transition: background-color 0.3s ease;
}

.left-block5 {
  display: flex;
  gap: 18px;
}

.right-block5 {
  top: 18px;
}

.school-card5 .logo5 {
  text-align: center;
  margin-bottom: 10px;
  margin-top: 15px;
}


.logo5 {
  border-radius: 8px;
  overflow: hidden;
  max-width: 800px;
  width: 100%;
  height: 208px; 
}

.logo5 img {
  border-radius: 8px;
  width: 100%;       
  height: 100%;       
  object-fit: contain;
  display: block;
  margin: 0 auto 0;
  background-color: #ffffff; 
}
.school-card5 .tags5 {
  margin: 10px 0;
}

.school-card5 h3 {
  margin: 10px 0 5px;
  font-size: 20px;
  color: #212121;
  font-weight: 400;
  margin-bottom: 10px;
}

.school-card5 p {
  margin: 5px 0;
  line-height: 1.3em;
  color: #616161;
  font-size: 16px;
  font-weight: 400;
}

.school-card5 .info5 {
  margin: 10px 0;
  color: #757575;
  font-size: 14px;
  font-weight: 400;
}


.tag5 {
  display: inline-block;
  height: 44px;
  background: #ffffff;
  border-radius: 8px;
  line-height: 37px;
  margin: 2px;
  font-size: 14px;    
  font-weight: 400;        
  position: relative;
  padding-right: 18px; 

  box-sizing: border-box; 
  margin-top: 10px;
}
.right-block5.grid-mode5 .school-card5 .tag5 {
  height: 32px;          
  line-height: 32px;     
  font-size: 10px;       
  padding: 0 8px 0 20px;        
  border-radius: 6px;     
  margin: 0;  


}
.right-block5.grid-mode5 .school-card5 .icon-button5 {
  width: 40px;           
  height: 40px; 
  display: flex;
  align-items: center;
 
  cursor: pointer;
  margin-top: -6px;  
  margin-right: -4px;   
}

.hidden5 {
  display: none;
}

.show-more5 {
  cursor: pointer;
  background: #ffffff;
  color: #212121;
  font-size: 16px;
  font-weight: 400;
  padding-left:17px; 
}


.school-card5 .metrics-combined5 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  font-size: 14px;
  background: #ffffff;
  padding: 5px 20px;
  border-radius: 8px;
  width: fit-content; 
  max-width: 100%; 
  color: #987D65;
  min-height: auto; 
  box-sizing: border-box;
  height: 44px;
  margin-bottom: 10px;
}

.metrics-combined5 span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap; 
}

.metrics-combined5 img {
  width: 20px !important;
  height: 20px !important;
}
.right-block5.grid-mode5 .school-card5 .logo5 img {  
  display: block;       
  height: 104px;  
  margin: 10px auto 0;  
  padding: 0;           
  line-height: 0;       
}
.right-block5.grid-mode5 .school-card5 .logo5{  
  margin-top: 5px;
  margin-bottom: -80px;    
}

.right-block5.grid-mode5 .school-card5 h3 {
  font-size: 16px;
  font-weight: 500;    
 display: -webkit-box;
  -webkit-line-clamp: 1;       
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0;
         
}

.right-block5.grid-mode5 .school-card5 p {
  font-size: 14px;  
  line-height: 1.2;
}
.right-block5.grid-mode5 .school-card5 .info5{
  font-size: 12px;
   display: -webkit-box;
  -webkit-line-clamp: 1;       
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

}

.right-block5.grid-mode5 .school-card5 .metrics-combined5 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;       
  padding: 4px 10px;
  font-size: 10px;
  height: 32px;
  
}

.right-block5.grid-mode5 .school-card5 .metrics-combined5 span {
  display: inline-flex;       
  align-items: center;
  gap: 4px;                   
}
.right-block5.grid-mode5 .school-card5 .show-more5 {
  text-indent: -10px;
  font-size: 10px;
  padding-left: 20px;
}

.right-block5.grid-mode5 .school-card5 .metrics-combined5 img {
  width: 12px !important;
  height: 12px !important;
  margin: 0;                 
}
.school-card5 .pagination5 {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.school-card5 .pagination-numbers5 {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 300;
  color: #757575;
}

.school-card5 .pagination-numbers5 span {
  cursor: pointer;
}

.pagination-btn5 {
  background: transparent;
  border: 1px solid #66b2ff;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-btn5 img {
  width: 14px;
  height: 14px;
  filter: brightness(0) saturate(100%) invert(51%) sepia(22%) saturate(3110%) hue-rotate(176deg) brightness(97%) contrast(92%);
  transition: filter 0.3s;
}

.pagination-btn5:hover img {
  filter: brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(1100%) hue-rotate(176deg) brightness(100%) contrast(90%);
}

.school-card5 .close-btn5 {
 position: relative;
  top: 10px;
  right: 10px;
  font-size: 16px;
  background: none;
  border: none;
  cursor: pointer;
}

.extra-tag5.hidden5 {
  display: none !important;
}

.show-more-button5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 640px;
  height: 56px;
  font-size: 16px;
  font-weight: 500;
  background-color: #ffffff;
  border: 1px solid #2196F3;
  border-radius: 6px;
  color: #2196F3;
  cursor: pointer;
  padding: 0 12px;
  box-sizing: border-box;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.show-more-button5:hover {
  background-color: #ECF6FE;
  transform: scale(1.05);
}

.arrow-icon5 {
  width: 32px;
  height: 32px;
  transition: transform 0.3s ease;
}
.arrow-icon5.rotated {
  transform: rotate(180deg);}

.show-more-button5:hover .arrow-icon5 {
  transform: translateY(4px); 
}
.icon-button5 {
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
   transition: background-color 0.2s ease;
   z-index: 1;
}
.school-card5 .icon-button5:hover svg path {
  fill: #fff;     
  stroke: #fff;    
}
.school-card5 .icon-button5 {
  position: absolute;
  top: 18px;
  right: 18px;
   background: #ffffff;       
  border: 1px solid #2196F3;   
  border-radius: 8px;           
  cursor: pointer;
  
  padding: 6px;                 
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;                  
  height: 48px;
}
.school-card5 .icon-button5 img {
  width: 20px;                  
  height: 20px;
  pointer-events: none;
}

.icon-button5 img {
  width: 20px; 
  height: 20px;
  pointer-events: none;
  transition: filter 0.2s ease;
 filter: none;

}
.icon-button5:hover {
  background-color: #2196F3;
}


.icon-button5.active {
  background-color: #2196F3;
}
.icon-button5:hover img,
.icon-button5.active img {
  filter: brightness(0) invert(1); 
}

.school-card5 .icon-button5:hover svg path {
  fill: #fff;     
  stroke: #fff;    
}
.school-card5 {
  position: relative; 
}


.school-card5 .logo5 img {
  position: relative;
  
}

.toggle-btn {
  padding: 4px 12px;
  font-size: 12px;
  border: 1px solid #2196F3;
  cursor: pointer;
}

.toggle-btn:first-child {
  border-radius: 6px 0 0 6px;
}

.toggle-btn:last-child {
  border-radius: 0 6px 6px 0;
  margin-left: -1px;
}

.toggle-btn.active {
  background-color: #2196F3;
  color: #fff;
}

.toggle-btn:not(.active) {
  background-color: #fff;
  color: #2196F3;
}
.district-tag:hover {
  background-color: #E3F2FD; 
  border-color: #2196F3;   
}

.district-tag:hover .district-close {
  color: #2196F3;          
}

.show-more {
  cursor: pointer;
}

@media (max-width: 768px) {
.container5 {
  width: 100%;
  margin: 20px 0 -5px 0;
  padding: 16px;
  border-radius: 24px;
  box-sizing: border-box;

  height: auto;

}
.left-block5.desktop-only {
  box-sizing: border-box;
  
  margin-bottom: -210px;     
  padding-bottom: 0;
}



.info5{
  font-size: 12px !important;
}
.text-bottom h3{
  font-size: 16px !important;
  margin-top: -5px;
}
.text-bottom p{
  font-size: 14px !important;
}
.icon-button5 {
  width: 32px !important;
  height: 32px !important;
  transform: translate(10px, -10px); 
}
.tag5.dot5 {
  width: auto;
  height: 32px;
  display: flex;           
  align-items: center;     
  padding-top: 2px;        
  padding-bottom: 0;      
  padding: 0 12px 0 22px;    
  box-sizing: border-box;
  font-size: 10px;
  margin-top: -2px; 
}
.tag5.dot5::before {
  margin-left: -8px; 
}

.show-more5{
  width: auto;
  height: 32px;
  display: flex;          
  align-items: center;    
  padding-top: 2px;       
  padding-bottom: 0;       
  padding: 0 10px;         
  box-sizing: border-box;
  font-size: 10px;
  margin-top: -2px; 
}

.logo5 {
  height: 104px;
  width: auto;
  padding: 0 6px;
  position: relative;
  top: -6px; 
}
.inner-content {
margin-top:0;      
}

  .view-toggle5{
    display: none;
  }
  .container5 h2{
    margin-top: 0;
  }
 .filters6 .filter-group5 {
  position: relative; /* родитель для абсолютной кнопки */
  width: clamp(240px, 80vw, 400px); /* адаптивная ширина поля */
}

.icon-filter5 {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;     
  height: 32px;    
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
top:-10px;
  position: absolute;
  right: 20px;    

}
  .arrow5{

   max-width: 120px; 
    width: 100%;      
    top: 0;
    right: calc(10% + -50px);
    position: absolute;
    content: url('https://prosto-dev-server.srv3.s3app.org/download/?id=79494567-220c-4348-8b70-95efea27dd9b&mode=view');
  }
  .filter-left5{
    display: none;
  }
.filter-center5 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;
  line-height: 1.2;
  padding-left: 75px;
  height: 20px;
  margin-top: -20px;

}
.dropdown-btn5{
width: 320px;
margin-left: -25px;
height: 48px;
font-size: 14px;
}
.count5{
  font-size: 14px !important;
}
  

  .title5,
  .hero-strong5 {
    font-size: 20px;

  }
  .title5 h2{
    font-size: 20px;
    margin-top: -10px;
  }


  .modal5 {
    display: none;
        
  }

    .modal6 {
    width: 100%;
    height: auto;
    max-height:450px;
    overflow-y: auto;

  }
 

  .right-block5,
  .school-card5 {
    width: 100%;
  position: relative;
  top: -100px;


  }
.school-card5 .metrics-combined5 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  font-size: 10px;
  padding: 5px 12px;
  border-radius: 8px;
  width: fit-content; 
  max-width: 100%; 
 
  min-height: auto; 
  box-sizing: border-box;
  height: 32px;
}

.metrics-combined5 span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap; 
}

.metrics-combined5 img {
  width: 12px !important;
  height: 12px !important;
}

  .right-block5.grid-mode5 {
    flex-direction: column;

  }

  .filters5{
    display: none;
  }


  .school-card5 {
    font-size: 12px;
    padding: 8px;
  }

  .school-card5 h3 {
    font-size: 14px;
  }

  .filter-bar5 {
    flex-direction: column;
    gap: 8px;
    margin-top: -20px;
  }

  .view-toggle5 {
    justify-content: center;
  }

 .filters-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  
  min-height: 40px;
}

  .filter-header5 label{
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: -20px;

  }
 .reset-btn5,
.submit-btn5 {
  width: clamp(280px, 80vw, 365px);
  height: 48px;
  font-size: 14px;
  margin-left: -24px;
}

  .right-block5 {
    width: 100% !important;
    margin: 0;
  }
   .right-block5.list-mode5 {
    margin-top:210px; 
    width: 100% !important;
  }

  .left-block5 > * {
    width: 100%; 
  }

 
  .show-more-button5 {
    width: 100% !important;
    box-sizing: border-box;
      height: 48px;
  font-size: 14px;
  position: relative;
  top: -110px !important;
  }
    .filter-bar5 {
    flex-direction: row !important; 
    flex-wrap: nowrap;               
    justify-content: space-between; 
    gap: 12px;
  }

}