
html.sd-modal-lock-v20,
body.sd-modal-lock-v20{
    overflow:hidden!important;
    overscroll-behavior:none!important;
}


/* =========================
   ВСЕ MODAL
   ========================= */

.modal.active{
    position:fixed!important;
    inset:0!important;

    width:100vw!important;
    height:var(--sd-modal-vh,100dvh)!important;
    max-height:var(--sd-modal-vh,100dvh)!important;

    box-sizing:border-box!important;

    overflow:hidden!important;
    overscroll-behavior:none!important;
}


/* Скролл только внутри самого окна */
.modal.active > .modal-box{
    min-height:0!important;

    max-height:
        calc(
            var(--sd-modal-vh,100dvh)
            - 28px
        )!important;

    overflow-x:hidden!important;
    overflow-y:auto!important;

    overscroll-behavior-y:contain!important;

    -webkit-overflow-scrolling:touch!important;

    touch-action:pan-y!important;
}


/* Админское modal */
#siteAdminModal.active{
    height:var(--sd-modal-vh,100dvh)!important;
    max-height:var(--sd-modal-vh,100dvh)!important;

    overflow:hidden!important;
    overscroll-behavior:none!important;
}

#siteAdminModal.active > .site-admin-modal-box{
    max-height:
        calc(
            var(--sd-modal-vh,100dvh)
            - 20px
        )!important;

    overscroll-behavior:contain!important;
}


/* На телефоне legal текст скроллится вместе с окном,
   а не вторым вложенным скроллом */
@media(max-width:760px){

    .legal-modal.active .legal-scroll{
        max-height:none!important;
        overflow:visible!important;
    }

}


/* =========================================================
   ВХОД / РЕГИСТРАЦИЯ
   ========================================================= */

#loginModal.sd-auth-modal-v6,
#registerModal.sd-auth-modal-v6{
    padding:14px!important;

    align-items:center!important;
    justify-content:center!important;

    background:rgba(3,4,6,.72)!important;

    backdrop-filter:blur(14px) saturate(110%)!important;
    -webkit-backdrop-filter:blur(14px) saturate(110%)!important;
}


/* Убираем старое растягивание grid */
#loginModal.sd-auth-modal-v6 .sd-auth-dialog-v6,
#registerModal.sd-auth-modal-v6 .sd-auth-dialog-v6{
    display:block!important;

    height:auto!important;
    min-height:0!important;

    margin:auto!important;
    padding:0!important;

    overflow-x:hidden!important;
    overflow-y:auto!important;

    overscroll-behavior-y:contain!important;

    -webkit-overflow-scrolling:touch!important;

    border:1px solid rgba(255,255,255,.11)!important;
    border-radius:24px!important;

    background:#101114!important;
    color:#fff!important;

    box-shadow:
        0 28px 90px
        rgba(0,0,0,.52)!important;
}


#loginModal.sd-auth-modal-v6 .sd-auth-dialog-v6{
    width:min(
        430px,
        calc(100vw - 28px)
    )!important;

    max-height:min(
        650px,
        calc(
            var(--sd-modal-vh,100dvh)
            - 28px
        )
    )!important;
}


#registerModal.sd-auth-modal-v6 .sd-auth-dialog-v6{
    width:min(
        680px,
        calc(100vw - 28px)
    )!important;

    max-height:
        calc(
            var(--sd-modal-vh,100dvh)
            - 28px
        )!important;
}


/* Скролл теперь у dialog целиком.
   Форма отдельно не растягивается. */
#loginModal .sd-auth-form-v6,
#registerModal .sd-auth-form-v6{
    min-height:0!important;

    overflow:visible!important;

    overscroll-behavior:contain!important;
}


/* =========================
   HEADER AUTH
   ========================= */

.sd-auth-head-v6{
    position:relative!important;

    padding:
        22px
        70px
        14px
        22px!important;

    border-bottom:0!important;

    background:#101114!important;
}


.sd-auth-brand-v6{
    margin:0 0 13px!important;

    gap:8px!important;

    font-size:9px!important;

    letter-spacing:.18em!important;

    color:rgba(255,255,255,.48)!important;
}


.sd-auth-head-v6 h3{
    margin:0!important;

    font-size:40px!important;

    line-height:.95!important;

    letter-spacing:-.025em!important;
}


/* Если старые пояснения где-то остались */
.sd-auth-head-v6 p{
    display:none!important;
}


/* Крестик меньше и аккуратнее */
.sd-auth-close-v6{
    top:17px!important;
    right:17px!important;

    width:44px!important;
    min-width:44px!important;
    height:44px!important;

    padding:0!important;

    border-radius:14px!important;

    background:#1a1b1e!important;

    border:
        1px solid
        rgba(255,255,255,.10)!important;

    box-shadow:none!important;

    font-size:24px!important;
    line-height:1!important;
}


.sd-auth-close-v6:hover{
    background:#ff2028!important;
    transform:none!important;
}


/* =========================
   FORM
   ========================= */

.sd-auth-form-v6{
    display:grid!important;

    gap:14px!important;

    padding:
        12px
        22px
        20px!important;

    background:#101114!important;
}


.sd-auth-grid-v6{
    gap:13px!important;
}


.sd-auth-field-v6{
    display:grid!important;

    gap:7px!important;

    margin:0!important;

    font-size:10px!important;
    line-height:1.15!important;

    color:
        rgba(255,255,255,.48)!important;
}


.sd-auth-field-v6 > span{
    display:block!important;

    margin:0!important;
    padding:0!important;
}


.sd-auth-field-v6 input,
.sd-auth-field-v6 select{
    height:52px!important;
    min-height:52px!important;

    margin:0!important;

    padding:
        0
        15px!important;

    border-radius:14px!important;

    background:#18191c!important;

    border-color:
        rgba(255,255,255,.10)!important;

    font-size:16px!important;
    font-weight:800!important;
}


.sd-auth-submit-v6{
    height:52px!important;
    min-height:52px!important;

    margin:
        2px
        0
        0!important;

    border-radius:14px!important;

    box-shadow:
        0 12px 28px
        rgba(255,31,39,.17)!important;

    font-size:16px!important;
}


.sd-auth-switch-v6{
    margin:0!important;

    padding:
        15px
        22px
        18px!important;

    border-top:
        1px solid
        rgba(255,255,255,.07)!important;

    background:#0d0e10!important;

    font-size:13px!important;
    line-height:1.3!important;
}


/* =========================================================
   СВЕТЛАЯ ТЕМА
   ========================================================= */

html[data-site-theme="light"]
#loginModal .sd-auth-dialog-v6,

html[data-site-theme="light"]
#registerModal .sd-auth-dialog-v6{
    border-color:
        rgba(0,0,0,.10)!important;

    background:#f7f7f5!important;

    color:#111!important;

    box-shadow:
        0 28px 80px
        rgba(0,0,0,.20)!important;
}


html[data-site-theme="light"]
.sd-auth-head-v6,

html[data-site-theme="light"]
.sd-auth-form-v6{
    background:#f7f7f5!important;
}


html[data-site-theme="light"]
.sd-auth-brand-v6{
    color:
        rgba(0,0,0,.42)!important;
}


html[data-site-theme="light"]
.sd-auth-head-v6 h3{
    color:#111!important;
}


html[data-site-theme="light"]
.sd-auth-close-v6{
    background:#ececea!important;

    border-color:
        rgba(0,0,0,.08)!important;

    color:#111!important;
}


html[data-site-theme="light"]
.sd-auth-field-v6{
    color:
        rgba(0,0,0,.52)!important;
}


html[data-site-theme="light"]
.sd-auth-field-v6 input,

html[data-site-theme="light"]
.sd-auth-field-v6 select{
    background:#fff!important;

    border-color:
        rgba(0,0,0,.10)!important;

    color:#111!important;
}


html[data-site-theme="light"]
.sd-auth-switch-v6{
    background:#f1f1ef!important;

    border-top-color:
        rgba(0,0,0,.07)!important;
}


/* =========================================================
   ТЕЛЕФОН
   ========================================================= */

@media(max-width:650px){

    .modal.active{
        padding:
            max(
                8px,
                env(safe-area-inset-top)
            )
            10px
            max(
                8px,
                env(safe-area-inset-bottom)
            )!important;

        align-items:center!important;
    }


    .modal.active > .modal-box{
        width:100%!important;
        max-width:100%!important;

        max-height:
            calc(
                var(--sd-modal-vh,100dvh)
                - max(
                    16px,
                    env(safe-area-inset-top)
                )
                - max(
                    16px,
                    env(safe-area-inset-bottom)
                )
            )!important;

        margin:auto!important;
    }


    #loginModal.sd-auth-modal-v6,
    #registerModal.sd-auth-modal-v6{
        padding:
            max(
                8px,
                env(safe-area-inset-top)
            )
            10px
            max(
                8px,
                env(safe-area-inset-bottom)
            )!important;
    }


    #loginModal.sd-auth-modal-v6
    .sd-auth-dialog-v6,

    #registerModal.sd-auth-modal-v6
    .sd-auth-dialog-v6{
        width:100%!important;
        max-width:430px!important;

        max-height:
            calc(
                var(--sd-modal-vh,100dvh)
                - max(
                    16px,
                    env(safe-area-inset-top)
                )
                - max(
                    16px,
                    env(safe-area-inset-bottom)
                )
            )!important;

        border-radius:22px!important;
    }


    .sd-auth-head-v6{
        padding:
            19px
            64px
            12px
            18px!important;
    }


    .sd-auth-brand-v6{
        margin-bottom:11px!important;

        font-size:8px!important;
    }


    .sd-auth-head-v6 h3{
        font-size:36px!important;
    }


    .sd-auth-close-v6{
        top:14px!important;
        right:14px!important;

        width:42px!important;
        min-width:42px!important;
        height:42px!important;

        border-radius:13px!important;
    }


    .sd-auth-form-v6{
        gap:12px!important;

        padding:
            10px
            18px
            17px!important;
    }


    .sd-auth-grid-v6{
        grid-template-columns:1fr!important;

        gap:12px!important;
    }


    .sd-auth-field-v6{
        gap:6px!important;
    }


    .sd-auth-field-v6 input,
    .sd-auth-field-v6 select{
        height:50px!important;
        min-height:50px!important;

        border-radius:13px!important;

        font-size:16px!important;
    }


    .sd-auth-submit-v6{
        height:50px!important;
        min-height:50px!important;

        border-radius:13px!important;
    }


    .sd-auth-switch-v6{
        padding:
            14px
            18px
            16px!important;

        font-size:12px!important;
    }


    .sd-auth-legal-v6{
        font-size:10px!important;

        line-height:1.3!important;
    }

}


/* Маленькие по высоте телефоны */
@media(max-width:650px) and (max-height:700px){

    .sd-auth-head-v6{
        padding-top:15px!important;
        padding-bottom:9px!important;
    }


    .sd-auth-brand-v6{
        margin-bottom:8px!important;
    }


    .sd-auth-head-v6 h3{
        font-size:32px!important;
    }


    .sd-auth-form-v6{
        padding-top:8px!important;
        padding-bottom:13px!important;

        gap:10px!important;
    }


    .sd-auth-field-v6 input,
    .sd-auth-field-v6 select{
        height:46px!important;
        min-height:46px!important;
    }


    .sd-auth-submit-v6{
        height:47px!important;
        min-height:47px!important;
    }


    .sd-auth-switch-v6{
        padding-top:11px!important;
        padding-bottom:12px!important;
    }

}

