.bottom-panel-backdrop {
  position: fixed;
  height: 6.6rem;
  z-index: 490;
  bottom: 0;
  right: 0;
  left: 0;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgb(var(--color-surface-dark-rgb) / 0.75) 0%,
    rgb(var(--color-surface-dark-rgb) / 0) 100%
  );
}
.bottom-panel {
  position: fixed;
  z-index: 500;
  bottom: 0.2rem;
  right: 0.2rem;
  left: 0.2rem;
  display: flex;
  align-items: stretch;
  pointer-events: none;
  background-color: rgba(var(--color-surface-inverse-rgb) / 0.25);
  -webkit-backdrop-filter: blur(0.4rem);
  backdrop-filter: blur(0.4rem);
  border-radius: 20rem;
  gap: 0.6rem;
  padding: 0.6rem;
}
.bottom-panel__inner {
  width: 100%;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 10;
}

/*  */

.contact-toggle {
  position: relative;
  z-index: 510;
  align-items: center;
  justify-content: center;
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  border: 0.2rem solid var(--color-primary);
  padding: 0.2rem;
  color: var(--color-on-primary);
  display: flex;
  pointer-events: auto;
}
.contact-toggle .contact-toggle__inner {
  background-color: var(--color-primary);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.contact-toggle .contact-toggle__icons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: var(--duration-slow);
}
.contact-toggle .contact-toggle__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: scale(0.7) rotate(-45deg);
  transition: var(--duration-slow);
}
.contact-toggle .contact-toggle__item.is-active {
  opacity: 0.7;
  transform: scale(1) rotate(0);
}
.contact-toggle .contact-toggle__item.contact-toggle__item--phone .icon {
  width: 2.2rem;
  height: 2.2rem;
}
.contact-toggle .contact-toggle__item.contact-toggle__item--vkontakte .icon {
  width: 2.2rem;
  height: 2.2rem;
}
.contact-toggle .contact-toggle__item.contact-toggle__item--max .icon {
  width: 2rem;
  height: 2rem;
}
.contact-toggle .contact-toggle__item.contact-toggle__item--email .icon {
  width: 2.4rem;
  height: 2.4rem;
}
.contact-toggle .contact-toggle__close {
  opacity: 0;
  transform: scale(0.7) rotate(-90deg);
  transition: var(--duration-slow);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-toggle .contact-toggle__close .icon {
  width: 1.6rem;
  height: 1.6rem;
}
.contact-toggle.is-active .contact-toggle__icons {
  opacity: 0;
}
.contact-toggle.is-active .contact-toggle__close {
  opacity: 0.7;
  transform: scale(1) rotate(0);
}

/*  */

.bottom-panel .bottom-panel__shop {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.bottom-panel .halal-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  pointer-events: auto;
  height: 5.2rem;
  border-radius: 20rem;
  padding: 0 2rem 0 1.4rem;
  gap: 0.8rem;
  background-color: rgb(var(--color-surface-rgb) / 0.12);
}
.bottom-panel .halal-selector .selector__input-wrap {
  position: relative;
}
.bottom-panel .halal-selector .selector__checkbox {
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.bottom-panel .halal-selector .selector__switch {
  width: 4rem;
  height: 2.4rem;
  display: flex;
  border-radius: 20rem;
  border: 0.2rem solid var(--color-primary);
  transition: var(--duration-normal);
}
.bottom-panel .halal-selector .selector__checkbox:checked + .selector__switch {
  background-color: var(--color-primary);
}
.bottom-panel .halal-selector .selector__switch .selector__switch-dot {
  display: block;
  border-radius: 50%;
  width: 1.6rem;
  height: 1.6rem;
  background-color: var(--color-primary);
  position: absolute;
  left: 0.4rem;
  top: 0.4rem;
  right: auto;
  transition: var(--duration-normal);
}
.bottom-panel
  .halal-selector
  .selector__checkbox:checked
  + .selector__switch
  .selector__switch-dot {
  left: 2rem;
  background-color: var(--color-on-primary);
}
.bottom-panel .halal-selector .selector__title {
  font-size: var(--font-size-sm);
  color: var(--color-text-inverse);
}