.favorites-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  color: #fff;
  background: #245e67;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font: 700 9px/1 Inter, Arial, sans-serif;
  letter-spacing: 0;
}

.favorites-count[hidden] { display: none !important; }

.main-nav a.is-active .favorites-count {
  color: #14222d;
  background: #dce9e6;
}

.mobile-nav .favorites-count {
  margin-left: 6px;
  vertical-align: middle;
}

#mobile-navigation { overflow-y: auto; }

[data-favorite-offer] svg {
  fill: transparent;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 180ms ease, transform 180ms ease;
}

[data-favorite-offer].is-active svg { fill: currentColor; }
[data-favorite-offer]:active svg { transform: scale(.9); }

.offer-favorite {
  width: 35px;
  height: 35px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 50%;
  color: #fff;
  background: rgba(11, 21, 28, .62);
  display: grid;
  place-items: center;
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 7;
  cursor: pointer;
  backdrop-filter: blur(7px);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.offer-favorite:hover,
.offer-favorite:focus-visible {
  color: #14222d;
  border-color: #dce9e6;
  background: #dce9e6;
  transform: translateY(-1px);
}

.offer-favorite.is-active {
  color: #fff;
  border-color: #245e67;
  background: #245e67;
}

.offer-favorite svg { width: 17px; height: 17px; stroke-width: 1.7; }