/* =========================================================
   MOZGO STORE AUTH MOBILE — DESIGN FINAL
========================================================= */

@media (max-width: 900px) {

    html {
        width: 100% !important;
        min-width: 0 !important;

        overflow-x: hidden !important;
    }

    body.mozgo-mobile-auth-final {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;

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

        overflow-x: hidden !important;

        background:
            radial-gradient(
                circle at 95% 3%,
                rgba(255, 125, 99, .12),
                transparent 31%
            ),
            radial-gradient(
                circle at 3% 96%,
                rgba(15, 130, 125, .08),
                transparent 34%
            ),
            #fffaf8 !important;

        color: #141d30 !important;
    }

    /* =====================================================
       ESTRUTURA
    ===================================================== */

    body.mozgo-mobile-auth-final
    .mozgo-store-login-shell,
    body.mozgo-mobile-auth-final
    .mozgo-store-auth-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-mobile-auth-final
    .mozgo-store-login-visual,
    body.mozgo-mobile-auth-final
    .mozgo-store-auth-visual {
        display: none !important;
    }

    body.mozgo-mobile-auth-final
    .mozgo-store-login-panel,
    body.mozgo-mobile-auth-final
    .mozgo-store-auth-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(22px, env(safe-area-inset-top))
            18px
            max(26px, env(safe-area-inset-bottom))
            !important;

        overflow: visible !important;

        background: transparent !important;
    }

    /* =====================================================
       LOGÓTIPO FORA DO CARTÃO
    ===================================================== */

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

        display: flex !important;

        width: 100% !important;
        max-width: 540px !important;

        min-height: 74px !important;

        margin: 0 auto 22px !important;
        padding: 0 4px !important;

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

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

        width: auto !important;
        max-width: 225px !important;
        max-height: 72px !important;

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

        object-fit: contain !important;
    }

    .mozgo-mobile-auth-brand-text {
        display: inline-block !important;

        color: #087c78 !important;

        font-size: 37px !important;
        font-weight: 850 !important;
        letter-spacing: -1px !important;
    }

    /*
     * Esconder logótipos antigos colocados
     * dentro do cartão.
     */
    body.mozgo-mobile-auth-final
    .mozgo-store-login-brand {
        display: none !important;
    }

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

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

        display: block !important;

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

        margin: 0 auto 24px !important;
        padding: 31px 28px 27px !important;

        overflow: visible !important;

        border: 1px solid #e7e8ec !important;
        border-radius: 25px !important;

        background: #ffffff !important;

        box-shadow:
            0 18px 48px
            rgba(31, 44, 65, .13) !important;
    }

    body.mozgo-mobile-auth-final
    .mozgo-store-login-card
    .mozgo-store-login-card,
    body.mozgo-mobile-auth-final
    .mozgo-store-auth-card
    .mozgo-store-auth-card {
        max-width: none !important;

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

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

        box-shadow: none !important;
    }

    /* =====================================================
       TÍTULO E DESCRIÇÃO
    ===================================================== */

    body.mozgo-mobile-auth-final
    .mozgo-store-login-intro,
    body.mozgo-mobile-auth-final
    .mozgo-store-auth-intro {
        width: 100% !important;

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

        text-align: left !important;
    }

    body.mozgo-mobile-auth-final
    .mozgo-store-login-intro h2,
    body.mozgo-mobile-auth-final
    .mozgo-store-auth-intro h2 {
        margin: 0 0 10px !important;

        color: #121b2e !important;

        font-size: 31px !important;
        font-weight: 850 !important;
        line-height: 1.15 !important;
        letter-spacing: -.5px !important;

        text-align: left !important;
    }

    body.mozgo-mobile-auth-final
    .mozgo-store-login-intro p,
    body.mozgo-mobile-auth-final
    .mozgo-store-auth-intro p {
        max-width: 420px !important;

        margin: 0 !important;

        color: #7a7f8e !important;

        font-size: 17px !important;
        line-height: 1.55 !important;

        text-align: left !important;
    }

    /* =====================================================
       REMOVER ESTRUTURA BOOTSTRAP ANTIGA
    ===================================================== */

    body.mozgo-mobile-auth-final
    .mozgo-store-login-card .row,
    body.mozgo-mobile-auth-final
    .mozgo-store-auth-card .row,
    body.mozgo-mobile-auth-final
    .mozgo-mobile-auth-card-final .row {
        display: block !important;

        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.mozgo-mobile-auth-final
    .mozgo-store-login-card [class*="col-"],
    body.mozgo-mobile-auth-final
    .mozgo-store-auth-card [class*="col-"],
    body.mozgo-mobile-auth-final
    .mozgo-mobile-auth-card-final [class*="col-"] {
        box-sizing: border-box !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 100% !important;

        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.mozgo-mobile-auth-final
    .width-50 {
        width: 100% !important;
        max-width: 100% !important;
    }

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

    body.mozgo-mobile-auth-final
    .form-group,
    body.mozgo-mobile-auth-final
    .input-field,
    body.mozgo-mobile-auth-final
    .md-form,
    body.mozgo-mobile-auth-final
    .form-floating {
        position: relative !important;

        box-sizing: border-box !important;

        width: 100% !important;

        margin: 0 0 20px !important;
    }

    body.mozgo-mobile-auth-final label,
    body.mozgo-mobile-auth-final
    .control-label {
        display: block !important;

        width: 100% !important;

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

        color: #303849 !important;

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

        text-align: left !important;
    }

    body.mozgo-mobile-auth-final
    input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
    body.mozgo-mobile-auth-final select,
    body.mozgo-mobile-auth-final textarea {
        box-sizing: border-box !important;

        display: block !important;

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

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

        border: 1px solid #dedfe3 !important;
        border-radius: 14px !important;

        outline: none !important;

        background: #fdfdfd !important;
        color: #20283b !important;

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

        box-shadow: none !important;
    }

    body.mozgo-mobile-auth-final
    input::placeholder,
    body.mozgo-mobile-auth-final
    textarea::placeholder {
        color: #a4a8b2 !important;
        opacity: 1 !important;
    }

    body.mozgo-mobile-auth-final
    input:focus,
    body.mozgo-mobile-auth-final
    select:focus,
    body.mozgo-mobile-auth-final
    textarea:focus {
        border-color: #f27657 !important;

        background: #ffffff !important;

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

    body.mozgo-mobile-auth-final textarea {
        min-height: 105px !important;

        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }

    /* =====================================================
       TELEFONE
    ===================================================== */

    body.mozgo-mobile-auth-final .iti,
    body.mozgo-mobile-auth-final
    .intl-tel-input {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    body.mozgo-mobile-auth-final
    .iti input,
    body.mozgo-mobile-auth-final
    .intl-tel-input input {
        width: 100% !important;

        padding-left: 98px !important;
    }

    /* =====================================================
       FOTO DE PERFIL
    ===================================================== */

    body.mozgo-mobile-auth-final
    input[type="file"] {
        box-sizing: border-box !important;

        display: block !important;

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

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

        border: 1px dashed #cfd4dc !important;
        border-radius: 13px !important;

        background: #fafbfc !important;
        color: #697083 !important;

        font-size: 12px !important;
    }

    body.mozgo-mobile-auth-final
    input[type="file"]::file-selector-button {
        margin-right: 9px !important;
        padding: 10px 12px !important;

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

        background: #eaf5f4 !important;
        color: #087c78 !important;

        font-weight: 750 !important;
    }

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

    body.mozgo-mobile-auth-final
    input[type="radio"] {
        width: 18px !important;
        height: 18px !important;

        accent-color: #17a69f !important;
    }

    /* =====================================================
       ESQUECEU A PALAVRA-PASSE
    ===================================================== */

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

        width: 100% !important;

        margin: -2px 0 22px !important;

        color: #ef704f !important;

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

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

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

    body.mozgo-mobile-auth-final
    button,
    body.mozgo-mobile-auth-final
    .btn,
    body.mozgo-mobile-auth-final
    input[type="submit"],
    body.mozgo-mobile-auth-final
    .create_vendor_btn {
        box-sizing: border-box !important;

        display: flex !important;

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

        margin: 10px 0 0 !important;
        padding: 12px 15px !important;

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

        border-radius: 14px !important;

        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;

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

        text-decoration: none !important;
    }

    /*
     * Botão principal.
     */
    body.mozgo-mobile-auth-final
    button[type="submit"],
    body.mozgo-mobile-auth-final
    input[type="submit"],
    body.mozgo-mobile-auth-final
    .create_vendor_btn,
    body.mozgo-mobile-auth-final
    .mozgo-mobile-primary-action {
        border: 0 !important;

        background:
            linear-gradient(
                100deg,
                #f56b48,
                #f68160
            ) !important;

        color: #ffffff !important;

        box-shadow:
            0 13px 27px
            rgba(242, 110, 75, .25) !important;
    }

    /*
     * Google, telefone e ações secundárias.
     */
    body.mozgo-mobile-auth-final
    .mozgo-mobile-secondary-action,
    body.mozgo-mobile-auth-final
    #btn-signup-phone {
        border: 1px solid #e1e2e6 !important;

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

        box-shadow: none !important;
    }

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

    .mozgo-mobile-auth-divider {
        display: flex !important;

        width: 100% !important;

        margin: 27px 0 20px !important;

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

        color: #89909e !important;

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

        text-align: center !important;
    }

    .mozgo-mobile-auth-divider::before,
    .mozgo-mobile-auth-divider::after {
        content: "" !important;

        display: block !important;

        height: 1px !important;

        flex: 1 1 auto !important;

        background: #e2e3e7 !important;
    }

    /* Rodapé */
    body.mozgo-mobile-auth-final
    .mozgo-store-login-footer,
    body.mozgo-mobile-auth-final
    .mozgo-store-auth-footer {
        margin-top: 22px !important;

        color: #a2a8b4 !important;

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

        text-align: center !important;
    }
}

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

@media (max-width: 420px) {

    body.mozgo-mobile-auth-final
    .mozgo-store-login-panel,
    body.mozgo-mobile-auth-final
    .mozgo-store-auth-panel {
        padding:
            max(16px, env(safe-area-inset-top))
            10px
            max(18px, env(safe-area-inset-bottom))
            !important;
    }

    .mozgo-mobile-auth-brand {
        min-height: 64px !important;

        margin-bottom: 17px !important;
        padding-left: 5px !important;
    }

    .mozgo-mobile-auth-brand img {
        max-width: 190px !important;
        max-height: 62px !important;
    }

    body.mozgo-mobile-auth-final
    .mozgo-store-login-card,
    body.mozgo-mobile-auth-final
    .mozgo-store-auth-card,
    body.mozgo-mobile-auth-final
    .mozgo-mobile-auth-card-final {
        max-width: none !important;

        padding: 27px 20px 23px !important;

        border-radius: 22px !important;
    }

    body.mozgo-mobile-auth-final
    .mozgo-store-login-intro h2,
    body.mozgo-mobile-auth-final
    .mozgo-store-auth-intro h2 {
        font-size: 28px !important;
    }

    body.mozgo-mobile-auth-final
    .mozgo-store-login-intro p,
    body.mozgo-mobile-auth-final
    .mozgo-store-auth-intro p {
        font-size: 15px !important;
    }

    body.mozgo-mobile-auth-final
    input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
    body.mozgo-mobile-auth-final select {
        min-height: 55px !important;
    }

    body.mozgo-mobile-auth-final
    button,
    body.mozgo-mobile-auth-final
    .btn,
    body.mozgo-mobile-auth-final
    .create_vendor_btn {
        min-height: 55px !important;
    }
}