.bsm-popup-recovery {
  position: fixed;
  z-index: 9998;
  top: 50%;
  right: 0;
  display: flex;
  align-items: flex-start;
  transform: translateY(-50%);
  color: #f8f3ee;
}

.bsm-popup-recovery[hidden] {
  display: none;
}

.bsm-popup-recovery__open,
.bsm-popup-recovery__close {
  border: 0;
  color: inherit;
  cursor: pointer;
}

.bsm-popup-recovery__open {
  min-height: 132px;
  padding: 14px 12px;
  border: 1px solid #c9632b;
  border-right: 0;
  background: #15120f;
  font: 600 13px/1.1 inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.bsm-popup-recovery__open:hover,
.bsm-popup-recovery__open:focus-visible {
  background: #c9632b;
  outline: none;
}

.bsm-popup-recovery__close {
  display: grid;
  width: 25px;
  height: 25px;
  margin: -10px 8px 0 -2px;
  border: 1px solid rgba(248, 243, 238, 0.75);
  border-radius: 50%;
  background: #15120f;
  font: 300 25px/20px Arial, sans-serif;
  place-items: center;
}

.bsm-popup-recovery__close:hover,
.bsm-popup-recovery__close:focus-visible {
  border-color: #c9632b;
  color: #c9632b;
  outline: none;
}

@media (max-width: 767px) {
  .bsm-popup-recovery {
    top: auto;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: none;
  }

  .bsm-popup-recovery__open {
    min-height: 46px;
    padding: 0 19px;
    border-right: 1px solid #c9632b;
    border-radius: 2px;
    writing-mode: initial;
    transform: none;
  }

  .bsm-popup-recovery__close {
    margin: -9px 0 0 -8px;
  }
}