.working-hours {
  position: relative;
  flex: 0 0 auto;
  z-index: 45;
}

.working-hours__trigger {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 9px 2px 7px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .075);
  color: rgba(255, 255, 255, .9);
  font: inherit;
  font-size: 11px;
  font-weight: 620;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.working-hours__trigger:hover,
.working-hours__trigger:focus-visible,
.working-hours__trigger[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .13);
  color: #fff;
}

.working-hours__trigger:focus-visible {
  outline: 2px solid #83d9f0;
  outline-offset: 2px;
}

.working-hours__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #8fa2b3;
  box-shadow: 0 0 0 3px rgba(143, 162, 179, .12);
}

.working-hours.is-open .working-hours__dot {
  background: #34c77b;
  box-shadow: 0 0 0 3px rgba(52, 199, 123, .15), 0 0 9px rgba(52, 199, 123, .32);
}

.working-hours__chevron {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: .62;
  transition: transform 160ms ease;
}

.working-hours__trigger[aria-expanded="true"] .working-hours__chevron {
  transform: rotate(180deg);
}

.working-hours__popover {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  width: max-content;
  min-width: 218px;
  max-width: min(280px, calc(100vw - 32px));
  transform: translateX(-50%);
  display: grid;
  gap: 5px;
  padding: 14px 15px 13px;
  border: 1px solid rgba(15, 55, 77, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  color: #17374b;
  box-shadow: 0 16px 38px rgba(10, 38, 55, .18), 0 2px 8px rgba(10, 38, 55, .08);
  backdrop-filter: blur(14px);
}

.working-hours__popover[hidden] {
  display: none;
}

.working-hours__popover::before {
  content: "";
  position: absolute;
  top: -5px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-top: 1px solid rgba(15, 55, 77, .12);
  border-left: 1px solid rgba(15, 55, 77, .12);
  background: #fff;
  transform: rotate(45deg);
}

.working-hours__popover strong,
.working-hours__popover span,
.working-hours__popover small {
  color: inherit;
}

.working-hours__popover strong {
  font-size: 13px;
  font-weight: 720;
}

.working-hours__popover span {
  font-size: 12px;
  font-weight: 580;
  color: #526d7d;
}

.working-hours__popover small {
  font-size: 11px;
  color: #7a909e;
}

@media (max-width: 1180px) {
  .working-hours__trigger {
    padding-inline: 7px;
  }

  .working-hours__chevron {
    display: none;
  }
}

@media (max-width: 820px) {
  .working-hours {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .working-hours__trigger,
  .working-hours__chevron {
    transition: none;
  }
}