body {
    background: url("assets/form-light.png"), url("assets/form-spotlight.svg"), url("assets/form-left-curtain.svg"), url("assets/form-right-curtain.svg"), url("assets/div-bar.svg"), url('assets/smoke.svg'), #12141B;
    background-position: top 13px center, top 23px center, left calc(50% - 25px) center, right calc(50% - 50px) center, top -30px center, center;
    background-size: auto, auto, cover, cover, auto, cover;
    /* background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat; */
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    /* background-position: left calc(50% - -14px) center;
    background-size: cover; */
}

/* Отключение фона автозаполнения для всех браузеров */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-internal-autofill-selected {
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
    color: var(--Gray, #818287) !important;
    -webkit-text-fill-color: var(--Gray, #818287) !important;
}

.form {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 280px auto auto auto;
    /* top: 55%;
    left: 50%;
    transform: translate(-50%, -50%); */
    width: 358px;
    justify-content: center;
    gap: 8px;

    legend {
        color: var(--White, #F8F8FF);
        text-align: center;
        font-family: Unbounded;
        font-size: 32px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%; /* 32px */
        text-transform: uppercase;

        .bold-title {
            font-weight: 700;
        }
    }

    label {
        display: none;
    }

    input {
        display: flex;
        padding-top: 12px;
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 8px;
        align-self: stretch;
        width: 100%;

        color: var(--White, #F8F8FF);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

        background: none;
        border: none;
        border-bottom: 1px solid rgb(129, 130, 135, 0.25) ;
        }

    input:placeholder {
        color: var(--Gray, #818287);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    input:focus {
        outline: none;
        color: var(--White, #F8F8FF);
        border-bottom: 1px solid #F8F8FF;
    }

    button {
        display: flex;
        height: 40px;
        padding: 12px 24px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: stretch;
        
        border: 1px solid transparent;
        border-image: linear-gradient(0deg, #12141B 25%,  #F8F8FF 50%) 1;
        background: rgba(248, 248, 255, 0.10);

        color: var(--White, #F8F8FF);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;

        margin-top: 32px;
        margin-bottom: 32px;
    }
}

.footer{
    display: flex;
    justify-content: space-between;
    a {
        color: var(--White, #F8F8FF);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-decoration: none;
    }

    span {
        color: var(--Gray, #818287);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%; /* 14px */
        opacity: 0.5;
    }
}

@media (max-width: 767px) {
    .form,
    .wrapper,
    .footer {
        width: 328px;
    }
}

.wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    margin: 280px auto auto auto;

    width: 358px;
    justify-content: center;
    align-items: center;

    .link-wrapper {
        display: flex;
        flex-direction: row;
        display: flex;
        /* margin-top: auto; */
    }

    .sent {
        width: 290px;
        height: 64px;
        background: url("assets/sent.svg");
        background-repeat: no-repeat;
    }

    .error {
        width: 302px;
        height: 128px;
        background: url("assets/error.svg");
        background-repeat: no-repeat;
    }

    p {
        color: var(--White, #F8F8FF);
        text-align: center;
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        opacity: 0.5;
    }

    a {
        color: var(--White, #F8F8FF);
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-decoration: none;
        padding: 12px 24px;
    }

    a.backtoform {
        justify-content: center;
        align-items: center;
        gap: 10px;
        border: 1px solid #F8F8FF;
        border-image: linear-gradient(0deg, #F8F8FF, transparent 75%) 1;
        background: rgba(248, 248, 255, 0.10);
    }
}

    .footer.contacts {
        /* margin-top: auto; */
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-height: 200px;
        flex-wrap: wrap;
        width: 358px;
        justify-content: center;
        align-items: center;
        margin: auto auto 32px auto;
        /* position: relative;
        top: 50%;
        left: 50%;
        transform: translateX(-50%); */

        .director-contacts {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            align-self: flex-start;
        }

        .dir-cont-wrapper {
            display: flex;
        }

        h2 {
            color: var(--Gray, #818287);
            font-family: Inter;
            font-size: 10px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            text-transform: uppercase;
        }

        p, .email {
            color: var(--White, #F8F8FF);
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            opacity: 1;
            text-align: left;
        }

        .phone {
            background-image: url("assets/phone-icon.svg");
            background-repeat: no-repeat;
            padding: 12px 12px 12px 24px;
            background-size: 12px 12px;
            background-position: 8px 16px;

            color: transparent;
            -webkit-text-fill-color: transparent;
            font-size: 0;

            width: 40px;
            height: 40px;
            background-size: 16px 16px;
            padding: 0;
            background-position: 12px 12px;
        }

        .phone:hover {
            background-image: url("assets/phone-icon-hover.svg");
        }

        .tg {
            width: 16px;
            height: 16px;
            background-image: url("assets/tg-icon.svg");
            background-repeat: no-repeat;
            padding: 12px;
            background-position: 12px 12px;
        }

        .tg:hover {
            background-image: url("assets/tg-icon-hover.svg");
        }

        .inst {
            width: 16px;
            height: 16px;
            background-image: url("assets/inst-icon.svg");
            background-repeat: no-repeat;
            padding: 12px;
            background-position: 12px 12px;
        }

        .inst:hover {
            background-image: url("assets/inst-icon-hover.svg");
        }

        .phone:hover,
        .tg:hover,
        .inst:hover,
        .email:hover,
        p:hover {
            color: #FF4FD8;
            cursor: pointer;
        }
    }

body:has(.footer.contacts) {
    display: flex;
    flex-direction: column;

    .link-wrapper {
        flex-direction: column;
        width: 100%;
        text-align: center;
        gap: 8px;

        .backtoform {
            order: 0;
        }
        .backtomain {
            order: 2;
        }   
    }

    .wrapper {
        gap: 32px;
    }
}

.custom-modal {
    display: none !important;
}

@media (max-width: 1279px) {
    .form input,
    .form input::placeholder,
    .form button,
    .footer a,
    .footer span {
        font-size: 12px;
    }
}