/* =========================
   Sticky bottom toasts
   ========================= */

.lr-toasts{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2200;
  pointer-events: none;

  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
}

.lr-toast{
  pointer-events: auto;

  width: min(360px, calc(50vw - 18px));
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;

  padding: 12px 40px 12px 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);

  color: rgba(0,0,0,.72);
  font-size: 12px;
  line-height: 1.35;
}

.lr-toast__text a{
  color: rgba(0,0,0,.75);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.22);
}
.lr-toast__text a:hover{ opacity: .85; }

.lr-toast__close{
  position: absolute;
  right: 10px;
  top: 8px;

  width: 28px;
  height: 28px;
  border-radius: 10px;

  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  cursor: pointer;

  font-size: 18px;
  line-height: 1;
  color: rgba(0,0,0,.55);
}

.lr-toast{ position: relative; }

/* mobile: stacking */
@media (max-width: 680px){
  .lr-toasts{
    left: 12px;
    right: 12px;
    bottom: 12px;
    flex-direction: column;
    align-items: stretch;
  }
  .lr-toast{
    width: 100%;
  }
}

/* чтобы не перекрывало мобильную панель/кнопки браузера */
@supports (padding: env(safe-area-inset-bottom)){
  .lr-toasts{ bottom: calc(12px + env(safe-area-inset-bottom)); }
}