/* Auth PRO page (local styles) */

body.page-pro-auth {
    --active-color: #027CC2;
    --active-color-hover: #024F7C;
    --main-text-color: #989898;
    --secondary-text-color: #999999;
    --input-border-color: #D9D9D9;
    --error-color: #EF4444;
}

body.page-pro-auth {
    margin: 0;

    #content {
        max-width: 100%;
        padding-inline: 0;

        .site-content-inner {
            margin-top: 0;
        }
    }

    #content,
    .site-content-inner,
    #primary,
    #main {
        min-height: 100dvh;
    }

    #main {
        display: flex;
    }

    /* Left block with Form */
    .auth-page__content {
        width: 640px;
        flex: 0 0 640px;
        max-width: 640px;
        padding: 24px 100px 80px 100px;

        @media (max-width: 740px) {
            width: 100%;
            max-width: 100%;
            flex: 1 1 100%;
        }

        @media (max-width: 660px) {
            padding: 24px 60px;
        }
        @media (max-width: 560px) {
            padding: 24px 40px;
        }
        @media (max-width: 443px) {
            padding: 16px;
            display: flex;
            flex-direction: column;
        }

        /* <- Назад */
        .auth-page__back {
            text-decoration: none;
            color: var(--active-color);
            font-size: 12px;
            font-weight: 600;
            display: inline-block;
            margin-bottom: 40px;

            @media (max-width: 443px) {
                order: -1;
                align-self: flex-start;
                margin-bottom: 0;
            }
        }

        /* Logo */
        .auth-page__logo {
            display: block;

            @media (max-width: 443px) {
                order: -2;
                align-self: flex-start;
                margin-bottom: 5px;
                margin-inline: auto;
            }
        }

        h1.entry-title {
            font-size: 30px;
            margin-block: 50px 8px!important;
            text-align: left;

            @media (max-width: 443px) {
                font-size: 24px;
                margin-block: 24px 6px!important;
            }
        }

        .entry-content {
            margin-inline: 0;
        }

        .auth-pro__subtitle,
        .reg-pro__subtitle {
            font-size: 14px;
            font-weight: 500;
            line-height: 120%;
            color: #4E5D78;
            margin-bottom: 40px;

            @media (max-width: 740px) {
                margin-bottom: 24px;
            }
        }

        @media (max-width: 740px) {
            .auth-pro__inner,
            .reg-pro__inner {
                padding: 0;
            }
        }

        #auth-form .form-group,
        #reg-form .form-group {
            display: flex;
            flex-direction: column;
        }

        #auth-form .form-row,
        #reg-form .form-row {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 4px;
        }

        /* auth error */
        .auth-pro-error__text {
            color: var(--error-color);
        }

        .auth-pro__form-label,
        .auth-pro__form-input {
            display: block;
            width: 100%;
        }

        .auth-pro__form-label,
        .reg-pro__form-label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: var(--main-text-color);
            margin-bottom: 3px;

            @media (max-width: 443px) {
                font-weight: 400;
            }
        }

        .auth-pro__form-input {
            padding: 16px;
            font-size: 14px;
            font-weight: 400;
            line-height: 100%;
            color: #0F172A!important;
            background-color: transparent!important;
            border-radius: 8px;
        }

        .auth-pro__form-input:focus,
        .reg-pro__form-input:focus {
            border-color: var(--active-color) !important;
            border-width: 2px;
        }

        .auth-pro__form-input:user-invalid,
        .auth-pro__form-input:user-invalid:focus,
        .reg-pro__form-input:user-invalid,
        .reg-pro__form-input:user-invalid {
            border-color: var(--error-color) !important;
            border-width: 2px;
        }

        .auth-pro__form-input:-webkit-autofill,
        .auth-pro__form-input:-webkit-autofill:hover,
        .auth-pro__form-input:-webkit-autofill:focus,
        .auth-pro__form-input:-webkit-autofill:active,
        .reg-pro__form-input:-webkit-autofill,
        .reg-pro__form-input:-webkit-autofill:hover,
        .reg-pro__form-input:-webkit-autofill:focus,
        .reg-pro__form-input:-webkit-autofill:active {
            -webkit-text-fill-color: #0f172a;
            caret-color: #0f172a;
            -webkit-box-shadow: 0 0 0 1000px #fff inset;
            box-shadow: 0 0 0 1000px #fff inset;
        }

        .auth-pro__form-input::placeholder {
            color: var(--secondary-text-color);
            font-size: 14px;
            font-weight: 400;
        }

        /* error */
        .auth-pro__email-error {
            display: none;
            margin-top: 6px;
            font-size: 12px;
            font-weight: 500;
            color: var(--error-color);
        }

        .auth-pro__email-error.is-visible {
            display: block;
        }

        .auth-pro__form-error,
        .reg-pro__form-error {
            display: none;
            align-items: flex-start;
            gap: 8px;
            text-align: left;
            font-size: 14px;
            font-weight: 400;
            line-height: 120%;
            color: #dd3333;
        }

        .auth-pro__form-error.is-visible,
        .reg-pro__form-error.is-visible {
            display: flex;
        }

        /* "Глаз" */
        .password__form--password-control {
            position: relative;
        }

        .password-control {
            position: absolute;
            top: 50%;
            right: 11px;
            width: 20px;
            height: 20px;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #000;
            opacity: 1;
            padding: 0;
            border: 0;
            background: transparent;
            cursor: pointer;
        }

        .password-control::before {
            position: static;
            display: block;
            width: 20px;
            height: 20px;
            line-height: 20px;
        }

        .password-control .dashicons::before {
            content: "";
            display: block;
            width: 20px;
            height: 20px;
            background: url("../images/icon--eye-on.svg") center / contain no-repeat;
        }
        .password-control.view .dashicons::before {
            background-image: url("../images/icon--eye-off.svg");
        }

        .password-control:focus-visible {
            outline: 2px solid var(--active-color);
            outline-offset: 2px;
        }

        .password__form--password-control input {
            padding-right: 44px;
        }

        button.auth-pro__form-btn,
        button.reg-pro__form-btn {
            display: block;
            width: 100%;
            background-color: var(--active-color);
            border-radius: 8px;
            box-shadow: none;
            font-weight: 700;
            padding: 13px;
            position: relative;
            margin: 20px 0 0 0;
        }
        button.auth-pro__form-btn:hover,
        button.reg-pro__form-btn:hover {
            background-color: var(--active-color-hover);
            border-color: var(--active-color-hover);
        }

        button.auth-pro__form-btn.loader:before {
            content: '';
            position: absolute;
            display: inline-block;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            border-radius: 8px;
            background-color: rgba(255, 255, 255, 0.1);
            background-image: linear-gradient( -45deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 75%, transparent 75%, transparent);
            background-size: 30px 30px;
            animation: move 0.5s linear infinite;
        }

        /* auth with socials */
        .auth-social__title {
            margin: 24px auto 16px auto;
            width: fit-content;
            font-size: 14px;
            font-weight: 500;
            line-height: 120%;
            color: #4E5D78;
        }

        .auth-social,
        .reg-social {
            display: flex;
            gap: 16px;
            justify-content: center;
        }
        .auth-social__img,
        .reg-social__img {
            object-fit: contain;
            border-radius: 50%;
        }

        .auth-social__img {
            width: 40px;
            height: 40px;
        }

        .auth-social__img--mail {
            padding: 3px;
            box-sizing: border-box;
            background-color: #087ff5;
        }

        .auth-pro__form-reg {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: space-between;
            margin-top: 24px;

            @media (max-width: 440px) {
                flex-direction: column;
                gap: 0;
                justify-content: center;
            }
        }

        .auth-pro__form-reg-wrap {
            text-align: center;
            margin-top: 0;
        }

        .auth-pro__form-reg a {
            text-decoration: none;
            font-size: 13px;
            cursor: pointer;
        }

        .auth-pro__form-reg--reg {
            color: var(--active-color)!important;
            font-weight: 600;
            transition: color .3s ease;
        }
        .auth-pro__form-reg--reg:hover {
            color: var(--active-color-hover)!important;
        }

        .auth-pro__form-reg--foget-parol,
        .auth-pro__form-reg--foget-parol:visited {
            font-size: 14px;
            font-weight: 500;
            line-height: 120%;
            color: #4E5D78;
            transition: color .3s ease;
        }
        .auth-pro__form-reg--foget-parol:hover {
            color: #1e1e1e;
        }
    }

    /* Right block Hero */
    .auth-pro-hero {
        flex: 1 1 auto;
        max-width: 100%;
        padding: 80px;
        align-self: stretch;
        background-color: #F3F7FC;
        display: flex;
        position: relative;
        overflow: hidden;
        isolation: isolate;

        @media (max-width: 1350px) {
            padding: 50px;
        }

        @media (max-width: 1240px) {
            padding: 30px;
        }

        @media (max-width: 1150px) {
            padding: 20px;
        }

        @media (max-width: 740px) {
            display: none;
        }

        .auth-pro-hero__content {
            align-self: center;
            position: relative;
            z-index: 2;
        }

        .auth-pro-hero__badge {
            font-size: 18px;
            font-weight: 900;
            color: #fff;
            background-color: var(--active-color);
            padding: 6px 12px;
            border-radius: 4px;

            @media (max-width: 1056px) {
                display: none;
            }
        }

        .auth-pro-hero__title {
            margin-block: 20px;
            margin-right: auto;

            @media (max-width: 1056px) {
                display: none;
            }
        }

        .auth-pro-hero__description {
            font-size: 15px;
            font-weight: 500;
            color: #4E5D78;
            margin: 0;
            max-width: 495px;

            @media (max-width: 1056px) {
                display: none;
            }
        }

        /* circles in bg */
        .auth-pro-hero__balls {
            position: absolute;
            top: 0;
            right: 0;
            width: 40%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            z-index: 2;

            @media (max-width: 1056px) {
                width: 100%;
            }
        }

        .auth-pro-hero__circle {
            position: absolute;
            display: block;
            border-radius: 50%;
            will-change: transform;
        }

        .auth-pro-hero__balls > .auth-pro-hero__circle {
            box-shadow: 0 6px 16px 0 rgb(0 0 0 / 12%);
        }

        .auth-pro-hero__circle--blue {
            top: 12%;
            left: 25%;
            width: 88px;
            height: 88px;
            background-color: #027cc2;
            animation: ball-move-1 18s ease-in-out infinite alternate;
    }

        .auth-pro-hero__circle--red {
            top: 37%;
            right: 14%;
            width: 56px;
            height: 56px;
            background-color: #ed443b;
            animation: ball-move-2 21s ease-in-out -6s infinite alternate;
        }

        .auth-pro-hero__circle--yellow {
            top: 58%;
            left: 32%;
            width: 72px;
            height: 72px;
            background-color: #e8b900;
            animation: ball-move-3 24s ease-in-out -11s infinite alternate;
        }

        .auth-pro-hero__circle--green {
            top: 78%;
            right: 10%;
            width: 64px;
            height: 64px;
            background-color: #00a852;
            animation: ball-move-4 20s ease-in-out -4s infinite alternate;
        }

        .auth-pro-hero__circle--blue-opacity {
            width: 120px;
            height: 120px;
            background-color: #027CC2;
            opacity: 0.12;
            bottom: 50px;
            left: 200px;
            animation: ball-move-2 23s ease-in-out -8s infinite alternate;
        }

        @media (prefers-reduced-motion: reduce) {
            .auth-pro-hero__circle {
                animation: none;
            }
}

        .auth-pro-hero__circle--pale {
            width: 700px;
            height: 700px;
            background-color: var(--active-color);
            opacity: 0.08;
            filter: blur(160px);
            right: -250px;
            top: -280px;
            z-index: 1;
        }

        .auth-pro-hero__circle--blue {
            background-color: var(--active-color);
            width: 88px;
            height: 88px;
            right: 1px;
            top: 1px;
        }
    }
}

/* Animation of balls in Hero */
@keyframes ball-move-1 {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(45px, 30px, 0); }
    55%  { transform: translate3d(-25px, 90px, 0); }
    80%  { transform: translate3d(35px, 135px, 0); }
    100% { transform: translate3d(-15px, 180px, 0); }
}

@keyframes ball-move-2 {
    0%   { transform: translate3d(0, 0, 0); }
    30%  { transform: translate3d(-70px, 35px, 0); }
    65%  { transform: translate3d(-25px, -45px, 0); }
    100% { transform: translate3d(-90px, 70px, 0); }
}

@keyframes ball-move-3 {
    0%   { transform: translate3d(0, 0, 0); }
    35%  { transform: translate3d(60px, -70px, 0); }
    70%  { transform: translate3d(-35px, 25px, 0); }
    100% { transform: translate3d(40px, 75px, 0); }
}

@keyframes ball-move-4 {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(-50px, -55px, 0); }
    60%  { transform: translate3d(-100px, 10px, 0); }
    100% { transform: translate3d(-35px, -100px, 0); }
}