/* =========================================================
   MOZGO STORE — LOGIN MOBILE POLIDO
========================================================= */

@media (max-width: 900px) {

    html,
    body.mozgo-login-mobile-polished {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: hidden !important;
    }

    body.mozgo-login-mobile-polished {
        margin: 0 !important;
        padding: 0 !important;

        background:
            radial-gradient(
                circle at 92% 3%,
                rgba(246, 119, 87, .10),
                transparent 30%
            ),
            #fffaf8 !important;
    }

    /* =====================================================
       PAINEL
    ===================================================== */

    body.mozgo-login-mobile-polished
    .mozgo-store-login-shell {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;

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

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-store-login-visual {
        display: none !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-store-login-panel {
        box-sizing: border-box !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;

        margin: 0 !important;

        padding:
            max(14px, env(safe-area-inset-top))
            10px
            max(20px, env(safe-area-inset-bottom))
            !important;

        background: transparent !important;

        overflow: visible !important;
    }

    /* =====================================================
       LOGÓTIPO
    ===================================================== */

    body.mozgo-login-mobile-polished
    .mozgo-mobile-auth-brand {
        box-sizing: border-box !important;

        display: flex !important;

        width: 100% !important;
        max-width: 500px !important;
        min-height: 60px !important;

        margin: 0 auto 13px !important;
        padding: 0 6px !important;

        align-items: center !important;
        justify-content: flex-start !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-mobile-auth-brand img {
        display: block !important;

        width: auto !important;
        max-width: 185px !important;
        max-height: 60px !important;

        margin: 0 !important;

        object-fit: contain !important;
    }

    /* =====================================================
       CARTÃO
    ===================================================== */

    body.mozgo-login-mobile-polished
    .mozgo-store-login-card {
        box-sizing: border-box !important;

        width: 100% !important;
        max-width: 500px !important;
        min-width: 0 !important;

        margin: 0 auto 18px !important;
        padding: 24px 20px 21px !important;

        border: 1px solid #e5e6ea !important;
        border-radius: 22px !important;

        background: #ffffff !important;

        box-shadow:
            0 15px 39px
            rgba(31, 44, 65, .12) !important;

        overflow: visible !important;
    }

    /*
     * Neutralizar cartões antigos dentro
     * do cartão principal.
     */
    body.mozgo-login-mobile-polished
    .mozgo-store-login-card
    .card,
    body.mozgo-login-mobile-polished
    .mozgo-store-login-card
    .login-box,
    body.mozgo-login-mobile-polished
    .mozgo-store-login-card
    .login-form {
        width: 100% !important;
        max-width: 100% !important;

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

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;
    }

    /* =====================================================
       TÍTULO
    ===================================================== */

    body.mozgo-login-mobile-polished
    .mozgo-store-login-intro {
        margin: 0 0 20px !important;
        padding: 0 !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-store-login-intro h2 {
        margin: 0 0 7px !important;

        color: #131c2f !important;

        font-size: 28px !important;
        font-weight: 850 !important;
        line-height: 1.15 !important;

        text-align: left !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-store-login-intro p {
        max-width: 390px !important;

        margin: 0 !important;

        color: #7b808e !important;

        font-size: 14px !important;
        line-height: 1.45 !important;

        text-align: left !important;
    }

    /* =====================================================
       CAMPOS
    ===================================================== */

    body.mozgo-login-mobile-polished
    .mozgo-store-login-card
    .form-group,
    body.mozgo-login-mobile-polished
    .mozgo-store-login-card
    .input-field,
    body.mozgo-login-mobile-polished
    .mozgo-store-login-card
    .md-form,
    body.mozgo-login-mobile-polished
    .mozgo-store-login-card
    .form-floating {
        box-sizing: border-box !important;

        width: 100% !important;

        margin: 0 0 15px !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-store-login-card label {
        display: block !important;

        margin: 0 0 7px !important;
        padding: 0 !important;

        color: #31394a !important;

        font-size: 14px !important;
        font-weight: 750 !important;
        line-height: 1.3 !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-store-login-card
    input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
    body.mozgo-login-mobile-polished
    .mozgo-store-login-card select {
        box-sizing: border-box !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-height: 52px !important;

        margin: 0 !important;
        padding: 0 14px !important;

        border: 1px solid #dedfe4 !important;
        border-radius: 13px !important;

        outline: none !important;

        background: #fdfdfd !important;
        color: #222a3c !important;

        font-size: 16px !important;
        line-height: 1.3 !important;

        box-shadow: none !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-store-login-card input:focus {
        border-color: #f27657 !important;

        background: #ffffff !important;

        box-shadow:
            0 0 0 4px
            rgba(242, 118, 87, .10) !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-store-login-card
    input::placeholder {
        color: #a4a7af !important;
        opacity: 1 !important;
    }

    /* =====================================================
       PROPRIETÁRIO / COLABORADOR
    ===================================================== */

    body.mozgo-login-mobile-polished
    .mozgo-login-role-title {
        display: block !important;

        width: 100% !important;

        margin: 1px 0 9px !important;

        color: #31394a !important;

        font-size: 14px !important;
        font-weight: 750 !important;
        line-height: 1.3 !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-login-role-group {
        display: flex !important;

        width: 100% !important;

        margin: 0 0 18px !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;

        gap: 12px 22px !important;
    }

    /*
     * Restaurar os rádios nativos.
     * O tema antigo escondia os inputs e
     * criava círculos através de pseudo-elementos.
     */
    body.mozgo-login-mobile-polished
    .mozgo-store-login-card
    input[type="radio"] {
        position: static !important;

        display: inline-block !important;

        width: 18px !important;
        height: 18px !important;

        margin: 0 7px 0 0 !important;
        padding: 0 !important;

        flex: 0 0 18px !important;

        opacity: 1 !important;

        appearance: auto !important;
        -webkit-appearance: radio !important;

        accent-color: #24a99f !important;

        vertical-align: middle !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-store-login-card
    input[type="radio"] + label {
        position: static !important;

        display: inline-flex !important;

        margin: 0 18px 0 0 !important;
        padding: 0 !important;

        align-items: center !important;

        color: #303849 !important;

        font-size: 14px !important;
        font-weight: 700 !important;

        vertical-align: middle !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-store-login-card
    input[type="radio"] + label::before,
    body.mozgo-login-mobile-polished
    .mozgo-store-login-card
    input[type="radio"] + label::after {
        display: none !important;
        content: none !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-login-role-option {
        display: inline-flex !important;

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

        align-items: center !important;
        gap: 5px !important;

        white-space: nowrap !important;
    }

    /* =====================================================
       ESQUECEU SENHA
    ===================================================== */

    body.mozgo-login-mobile-polished
    .mozgo-mobile-forgot-link {
        display: block !important;

        width: 100% !important;

        margin: 0 0 18px !important;
        padding: 0 !important;

        color: #ef704f !important;

        font-size: 13px !important;
        font-weight: 750 !important;
        line-height: 1.35 !important;

        text-align: right !important;
        text-decoration: none !important;
    }

    /* =====================================================
       BOTÕES
    ===================================================== */

    body.mozgo-login-mobile-polished
    .mozgo-store-login-card button,
    body.mozgo-login-mobile-polished
    .mozgo-store-login-card .btn,
    body.mozgo-login-mobile-polished
    .mozgo-store-login-card
    input[type="submit"] {
        box-sizing: border-box !important;

        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;
        min-height: 52px !important;

        margin: 9px 0 0 !important;
        padding: 10px 13px !important;

        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        border-radius: 13px !important;

        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;

        text-align: center !important;
        white-space: normal !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-login-action-primary,
    body.mozgo-login-mobile-polished
    .mozgo-login-register-action {
        border: 0 !important;

        background:
            linear-gradient(
                100deg,
                #f36c49,
                #f18465
            ) !important;

        color: #ffffff !important;

        box-shadow:
            0 10px 23px
            rgba(242, 110, 75, .22) !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-login-action-secondary {
        border: 1px solid #e0e2e6 !important;

        background: #ffffff !important;
        color: #222b40 !important;

        box-shadow: none !important;
    }

    /* =====================================================
       DIVISOR OU
    ===================================================== */

    body.mozgo-login-mobile-polished
    .mozgo-login-divider-fixed {
        display: flex !important;

        width: 100% !important;

        margin: 23px 0 17px !important;

        align-items: center !important;
        gap: 13px !important;

        color: #8b919e !important;

        font-size: 13px !important;
        font-weight: 750 !important;

        text-align: center !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-login-divider-fixed::before,
    body.mozgo-login-mobile-polished
    .mozgo-login-divider-fixed::after {
        content: "" !important;

        display: block !important;

        height: 1px !important;

        flex: 1 1 auto !important;

        background: #e1e3e7 !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-login-old-divider {
        display: none !important;
    }

    /* Rodapé */
    body.mozgo-login-mobile-polished
    .mozgo-store-login-footer {
        margin-top: 18px !important;

        font-size: 9px !important;
        line-height: 1.4 !important;
    }
}

/* =========================================================
   TELEFONES PEQUENOS
========================================================= */

@media (max-width: 390px) {

    body.mozgo-login-mobile-polished
    .mozgo-store-login-panel {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-store-login-card {
        padding: 22px 17px 19px !important;

        border-radius: 20px !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-store-login-intro h2 {
        font-size: 26px !important;
    }

    body.mozgo-login-mobile-polished
    .mozgo-login-role-group {
        gap: 10px 14px !important;
    }
}