/* =============== How Auth and find Id Modals ================= */
.howAuthModalTitle {
    font-size: 24px;
    line-height: 34px;
}
.howAuthModalStep {
    padding: 10px 20px 20px;
    width: 100%;
}
.howAuthModalStep:nth-last-child(1){
    padding-bottom: 0;
}
.howAuthModalStepHeader {
    display: flex;
    align-items: center;
    gap: 5px;
}
.howAuthModalStepNumber {
    width: 48px;
    height: 48px;
}
.howAuthModalStepTitle {
    font-size: 16px;
    color: #C79371;
    text-align: start;
}
.howAuthModalStepContent {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    margin-top: 15px;
}
.step1 {
    height: 117px;
}
.step2 {
    height: 135px;
}
.step3 {
    height: 178px;
}
.step5 {
    height: 203px;
}

.stepBg {
    position: absolute;
    top: 0;
    right: 0;
}

.lightBorder, .lightBorderRectangle, .lightBorderCircle, .stepTwoRectangle, .stepThreeRectangle, .stepTwoHowFindIdRectangle, .stepOneCircle {
    background: transparent; /* Прозрачный фон */
    border: none; /* Основная обводка */
    box-shadow: 0 0 15px 4px rgba(255, 190, 0, 0.9); /* Размытая обводка */

    animation: glows 1s infinite linear;
}

.lightBorderRectangle, .lightBorderCircle, .stepTwoRectangle, .stepThreeRectangle, .stepTwoHowFindIdRectangle {
    border-radius: 10px; /* Лёгкое скругление для аккуратности (опционально) */
}

.lightBorderCircle, .stepOneCircle {
    border-radius: 50%; /* Лёгкое скругление для аккуратности (опционально) */
}

/* step 1 */
.stepOneCircle {
    height: 63px;
    width: 64px;
    position: absolute;
    top: 24px;
    right: -9px;
}
.stepOneArrow {
    width: 54px;
    height: 54px;
    position: absolute;
    top: 45px;
    right: 17px;
    animation: spring 1.3s infinite ease-in-out;
}

/* step 2 */
.stepTwoRectangle {
    width: 182px;
    height: 44px;

    position: absolute;
    bottom: 19px;
    left: 42px;
}
.stepTwoArrow {
    width: 54px;
    height: 54px;
    position: absolute;
    bottom: 53px;
    left: 210px;
    animation: springBottom 1.3s infinite ease-in-out;
}

/* step 3 */
.stepThreeRectangle {
    width: 178px;
    height: 44px;

    position: absolute;
    bottom: 70px;
    left: 45px;
    border-radius: 12px;
}

/* step4 */
.step4_authSuccess {
    width: 182px;
    height: 44px;

    position: absolute;
    bottom: 19px;
    left: 42px;
}

/* step 5 */
.stepFiveArrow {
    width: 54px;
    height: 54px;
    position: absolute;
    bottom: 110px;
    left: 100px;
    animation: springHorizontal 1.3s infinite ease-in-out;
}

.howAuthModalFooter {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* step 2 how find Id */
.stepTwoHowFindIdRectangle {
    width: 174px;
    height: 43px;
    position: absolute;
    bottom: 14px;
    left: 47px;
    border-radius: 11px;
}

/* steps animations */
@keyframes glows {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes spring {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(0);
    }
    40% {
        transform: translateY(20px) translateX(-20px);
    }
    60% {
        transform: translateY(8px) translateX(-8px);
    }
}

@keyframes springBottom {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(0) rotate(-180deg);
    }
    40% {
        transform: translateY(20px) translateX(-20px) rotate(-180deg);
    }
    60% {
        transform: translateY(8px) translateX(-8px) rotate(-180deg);
    }
}

@keyframes springHorizontal {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(0);
    }
    40% {
        transform: translateY(20px) translateX(-20px);
    }
    60% {
        transform: translateY(8px) translateX(-8px);
    }
}