/* popup */

body.lock {
   overflow: hidden;
   touch-action: none;
   overscroll-behavior: none;
}
.popup__content::-webkit-scrollbar {
   width: 15px;
}
.popup__content::-webkit-scrollbar-track {
   background: var(--black-2);
}
.popup__content::-webkit-scrollbar-thumb {
   background-color: var(--brand-6);
   border-radius: 2px;
   border: 0px solid var(--black-2);
}
.backdrop {
   position: fixed;
   z-index: 48;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: #0000007d;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease;
}
.backdrop.active {
   opacity: 1;
   visibility: visible;
}
.popup {
   position: fixed;
   display: none;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.8);
   z-index: 50;
   opacity: 0;
   visibility: hidden;
   transition:
      opacity 0.3s ease,
      transform 0.3s ease;
}
.popup.active {
   display: block;
   opacity: 1;
   visibility: visible;
   transform: translate(-50%, -50%) scale(1);
}
.popup__close {
   position: absolute;
   top: 30px;
   right: -80px;
   width: 70px;
   height: 70px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   border-radius: 50%;
   z-index: 5;
   transition: all 0.6s ease 0s;
   background-color: var(--brand-4);
}
.popup__close svg path {
   fill: var(--black-0);
}
.popup__close:hover {
   background-color: var(--brand-6);
}
.popup__close:focus {
   background-color: var(--brand-8);
}
.popup__content {
   background-color: var(--black-0);
   max-width: 1024px;
   width: 1024px;
   max-height: 100vh;
   overflow-y: auto;
   overflow-x: clip;
}
.popup__body {
   padding: 80px;
}
.popup-form__header {
   margin-bottom: 40px;
}
.popup-form__title {
   margin-bottom: 24px;
}
.popup-form__subtitle {
   margin-bottom: 12px;
}
.popup-form__confirm {
   display: none;
}
.popup__body._succeful .popup-form__confirm {
   display: block;
}
.popup__body._succeful .popup-form__header {
   display: none;
}
.popup__body._succeful .popup-form__body {
   display: none;
}
.popup-form__confirm-wrapper {
   text-align: center;
}
.popup-form__confirm-img {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   max-width: 125px;
   width: 125px;
   margin: 0 auto 60px auto;
}
.popup-form__confirm-img svg {
   width: 100%;
   height: auto;
}
.popup-form__confirm-img svg path {
   fill: var(--brand-4);
}
.popup-form__confirm-subtitle {
   margin-top: 24px;
}
.popup-form__confirm-text {
   margin-top: 12px;
}
.popup-form__confirm-btn {
   display: block;
   width: fit-content;
   margin: 40px auto 0 auto;
}
@media (max-width: 1440) {
   .popup-form__confirm-img {
      margin: 0 auto 40px auto;
      max-width: 94px;
      width: 94px;
   }
}
@media (max-width: 1200px) {
   .popup__close {
      right: 30px;
   }
}
@media (max-width: 1024px) {
   .popup__content {
      max-width: 720px;
      width: 720px;
   }
   .form__row {
      flex-direction: column;
   }
   .popup__close {
      right: -80px;
   }
}
@media (max-width: 900px) {
   .popup__close {
      right: 10px;
   }
}
@media (max-width: 720px) {
   .popup__content {
      max-width: 100%;
      width: 100vw;
   }
}
@media (max-width: 690px) {
   .form__footer {
      flex-direction: column;
      align-items: flex-start;
   }
   .form__radio-row {
      flex-direction: column;
      gap: 16px;
   }
}
@media (max-width: 540px) {
   .popup__body {
      padding: 60px 26px;
   }
   .popup-form__confirm-title.h1 {
      font-size: 28px;
   }
   .popup-form__title {
      font-size: 28px;
   }
   .popup-form__subtitle {
      font-size: 20px;
   }
   .popup-form__confirm-subtitle {
      font-size: 20px;
   }
}
@media (max-width: 460px) {
   .popup-form__confirm-text {
      display: none;
   }
}
/* popup */