.feedback__load-text {
  opacity: 1;
  transition: opacity 0.3s ease 0.7s;
}

.feedback__load-text.hide {
  opacity: 0;
}

[support="drop"] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 3vw));
  opacity: 0;
  pointer-events: none;
}

[support="drop"].active {
  opacity: 1;
  transform: translate(-50%, -50.1%);
  pointer-events: auto;
}

[support="bg"] {
  opacity: 0;
  position: fixed !important;
  pointer-events: none;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

[support="bg"].active {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 769px) {
  [support="drop"] {
    transition: transform 0.5s ease, opacity 0.3s ease;
  }
  
  [support="drop"].active {
    transition: transform 0.5s ease 0.8s, opacity 0.3s ease 0.8s;
  }
}

@media (max-width: 768px) {
  /* Сначала базовое состояние */
  [support="drop"] {
    left: 0;
    top: 35%;
    bottom: 0;
    transform: none;
    /* Transition без задержки — для закрытия */
    transition: top 0.5s ease, opacity 0.3s ease;
  }

  /* Потом .active — чтобы перебить transition */
  [support="drop"].active {
    top: 20%;
    transform: none;
    /* Transition с задержкой — для открытия */
    transition: top 0.5s ease 0.8s, opacity 0.3s ease 0.8s;
  }
}