/* =========================================================
   MOZGO STORE — AUTH MOBILE DIRETO
========================================================= */

.mozgo-mobile-auth-brand {
    display: none;
}

@media (max-width: 900px) {

    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* =====================================================
       ELEMENTOS COMUNS
    ===================================================== */

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

        display: flex !important;

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

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

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

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

        width: auto !important;
        max-width: 215px !important;
        max-height: 68px !important;

        margin: 0 !important;

        object-fit: contain !important;
    }

    /* =====================================================
       REGISTO NORMAL
    ===================================================== */

    .mozgo-mobile-register-root {
        box-sizing: border-box !important;

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

        margin: 0 !important;

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

        background:
            radial-gradient(
                circle at 95% 4%,
                rgba(245, 107, 72, .11),
                transparent 30%
            ),
            radial-gradient(
                circle at 3% 96%,
                rgba(8, 124, 120, .08),
                transparent 34%
            ),
            #fffaf8 !important;
    }

    .mozgo-mobile-register-card {
        box-sizing: border-box !important;

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

        margin: 0 auto !important;
        padding: 28px 21px 23px !important;

        border: 1px solid #e6e7eb !important;
        border-radius: 24px !important;

        background: #ffffff !important;

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

    .mozgo-mobile-register-card
    > .container {
        box-sizing: border-box !important;

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

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

    .mozgo-mobile-register-card
    .page-titles {
        display: block !important;

        width: 100% !important;

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

    .mozgo-mobile-register-card
    .page-titles
    > .col-md-12 {
        width: 100% !important;

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

        text-align: left !important;
    }

    .mozgo-mobile-register-card
    .page-titles
    > .col-md-12 h3 {
        margin: 0 0 9px !important;

        color: #121b2e !important;

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

        text-align: left !important;
    }

    .mozgo-mobile-register-card
    .page-titles
    > .col-md-12::after {
        content:
            "Crie a sua conta para começar a gerir a sua loja.";

        display: block !important;

        max-width: 420px !important;

        color: #7d8290 !important;

        font-size: 15px !important;
        line-height: 1.5 !important;

        text-align: left !important;
    }

    .mozgo-mobile-register-card
    .card-body,
    .mozgo-mobile-register-card
    .restaurant_payout_create,
    .mozgo-mobile-register-card
    .restaurant_payout_create-inner {
        box-sizing: border-box !important;

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

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

        border: 0 !important;
        background: transparent !important;

        box-shadow: none !important;
    }

    .mozgo-mobile-register-card fieldset {
        width: 100% !important;

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

        border: 0 !important;
    }

    /*
     * Remover "Configurações administrativas"
     * no mobile para seguir o design de referência.
     */
    .mozgo-mobile-register-card legend {
        display: none !important;
    }

    .mozgo-mobile-register-card
    .form-group.row,
    .mozgo-mobile-register-card
    .row.width-50,
    .mozgo-mobile-register-card
    .row.width-100 {
        display: block !important;

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

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

    .mozgo-mobile-register-card
    [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: 0 !important;
    }

    .mozgo-mobile-register-card
    .control-label,
    .mozgo-mobile-register-card label {
        display: block !important;

        width: 100% !important;

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

        color: #303849 !important;

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

        text-align: left !important;
    }

    .mozgo-mobile-register-card
    input:not([type="hidden"]):not([type="file"]),
    .mozgo-mobile-register-card select {
        box-sizing: border-box !important;

        display: block !important;

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

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

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

        outline: none !important;

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

        font-size: 16px !important;

        box-shadow: none !important;
    }

    .mozgo-mobile-register-card
    input:focus,
    .mozgo-mobile-register-card
    select:focus {
        border-color: #f27657 !important;

        background: #ffffff !important;

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

    .mozgo-mobile-register-card
    .form-text {
        margin-top: 6px !important;

        color: #a1a6b1 !important;

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

    /* Telefone: código + número */
    .mozgo-mobile-register-card
    #phone-box
    > .col-7 {
        display: grid !important;

        grid-template-columns:
            minmax(105px, 118px)
            minmax(0, 1fr) !important;

        gap: 8px !important;

        align-items: start !important;
    }

    .mozgo-mobile-register-card
    #phone-box
    .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .mozgo-mobile-register-card
    #phone-box
    .select2-selection {
        box-sizing: border-box !important;

        height: 56px !important;
        min-height: 56px !important;

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

        background: #fdfdfd !important;
    }

    .mozgo-mobile-register-card
    #phone-box
    .select2-selection__rendered {
        padding-top: 13px !important;
        padding-left: 9px !important;

        font-size: 13px !important;
    }

    .mozgo-mobile-register-card
    #phone-box
    .select2-selection__arrow {
        height: 54px !important;
    }

    .mozgo-mobile-register-card
    #phone-box
    .form-text,
    .mozgo-mobile-register-card
    #phone-box
    .err {
        grid-column: 1 / -1 !important;
    }

    /* Foto */
    .mozgo-mobile-register-card
    input[type="file"] {
        box-sizing: border-box !important;

        display: block !important;

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

        padding: 9px !important;

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

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

        font-size: 12px !important;
    }

    .mozgo-mobile-register-card
    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;
    }

    .mozgo-mobile-register-card
    .uploaded_image_owner img {
        display: block !important;

        width: 100px !important;
        height: 100px !important;

        margin: 13px 0 0 !important;

        border-radius: 14px !important;

        object-fit: cover !important;
    }

    /* Botão Guardar */
    .mozgo-mobile-register-card
    .create_vendor_btn {
        display: flex !important;

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

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

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

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

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

        color: #ffffff !important;

        font-size: 15px !important;
        font-weight: 800 !important;

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

    .mozgo-mobile-register-card
    .form-group.col-12.text-center {
        width: 100% !important;

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

    .mozgo-mobile-register-card
    .or-line {
        display: flex !important;

        width: 100% !important;

        margin: 26px 0 19px !important;

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

        color: #8e94a0 !important;

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

    .mozgo-mobile-register-card
    .or-line::before,
    .mozgo-mobile-register-card
    .or-line::after {
        content: "" !important;

        height: 1px !important;

        flex: 1 1 auto !important;

        background: #e1e3e7 !important;
    }

    .mozgo-mobile-register-card
    #btn-signup-phone {
        display: flex !important;

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

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

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

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

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

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

        box-shadow: none !important;
    }

    .mozgo-mobile-register-card
    .form-group.col-12.text-center
    > a:last-child {
        display: block !important;

        margin-top: 20px !important;

        color: #ef704f !important;

        font-size: 13px !important;
        font-weight: 700 !important;
    }

    /* =====================================================
       REGISTAR COM TELEFONE E RECUPERAR SENHA
    ===================================================== */

    body.mozgo-mobile-phone-direct,
    body.mozgo-mobile-forgot-direct {
        min-height: 100vh !important;
        min-height: 100dvh !important;

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

        background:
            radial-gradient(
                circle at 95% 4%,
                rgba(245, 107, 72, .11),
                transparent 30%
            ),
            #fffaf8 !important;
    }

    body.mozgo-mobile-phone-direct
    #wrapper,
    body.mozgo-mobile-forgot-direct
    #wrapper {
        min-height: 100vh !important;
        min-height: 100dvh !important;

        background: transparent !important;
    }

    body.mozgo-mobile-phone-direct
    .login-register,
    body.mozgo-mobile-forgot-direct
    .login-register {
        box-sizing: border-box !important;

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

        margin: 0 !important;

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

        background: transparent !important;
    }

    body.mozgo-mobile-phone-direct
    .login-logo,
    body.mozgo-mobile-forgot-direct
    .login-logo {
        box-sizing: border-box !important;

        display: flex !important;

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

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

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

        text-align: left !important;
    }

    body.mozgo-mobile-phone-direct
    .login-logo a,
    body.mozgo-mobile-forgot-direct
    .login-logo a {
        display: block !important;

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

        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;
    }

    body.mozgo-mobile-phone-direct
    .login-logo img,
    body.mozgo-mobile-forgot-direct
    .login-logo img {
        display: block !important;

        width: auto !important;
        max-width: 215px !important;
        max-height: 68px !important;

        object-fit: contain !important;
    }

    body.mozgo-mobile-phone-direct
    .login-box.card,
    body.mozgo-mobile-forgot-direct
    .login-box.card {
        box-sizing: border-box !important;

        position: static !important;

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

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

        border: 1px solid #e6e7eb !important;
        border-radius: 24px !important;

        background: #ffffff !important;

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

        transform: none !important;
    }

    body.mozgo-mobile-phone-direct
    .login-box .card-body,
    body.mozgo-mobile-forgot-direct
    .login-box .card-body {
        box-sizing: border-box !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 29px 21px 23px !important;
    }

    body.mozgo-mobile-phone-direct
    .box-title,
    body.mozgo-mobile-forgot-direct
    .box-title {
        margin: 0 0 24px !important;

        color: #121b2e !important;

        font-size: 29px !important;
        font-weight: 850 !important;
        line-height: 1.2 !important;

        text-align: left !important;
    }

    body.mozgo-mobile-phone-direct
    .form-group,
    body.mozgo-mobile-forgot-direct
    .form-group {
        width: 100% !important;

        margin: 0 0 19px !important;
    }

    body.mozgo-mobile-phone-direct
    .col-xs-12,
    body.mozgo-mobile-forgot-direct
    .col-xs-12 {
        width: 100% !important;

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

    body.mozgo-mobile-phone-direct label,
    body.mozgo-mobile-forgot-direct label {
        display: block !important;

        width: 100% !important;

        margin: 0 0 8px !important;

        color: #303849 !important;

        font-size: 15px !important;
        font-weight: 750 !important;
    }

    body.mozgo-mobile-phone-direct
    input:not([type="hidden"]),
    body.mozgo-mobile-forgot-direct
    input:not([type="hidden"]),
    body.mozgo-mobile-phone-direct select {
        box-sizing: border-box !important;

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

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

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

        background: #fdfdfd !important;

        font-size: 16px !important;
    }

    body.mozgo-mobile-phone-direct
    #phone-box
    .col-xs-12 {
        display: grid !important;

        grid-template-columns:
            minmax(105px, 118px)
            minmax(0, 1fr) !important;

        gap: 8px !important;
    }

    body.mozgo-mobile-phone-direct
    #phone-box
    .select2-container {
        width: 100% !important;
    }

    body.mozgo-mobile-phone-direct
    button,
    body.mozgo-mobile-phone-direct
    .btn,
    body.mozgo-mobile-forgot-direct
    button,
    body.mozgo-mobile-forgot-direct
    .btn {
        display: flex !important;

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

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

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

        border-radius: 14px !important;

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

        text-align: center !important;
    }

    body.mozgo-mobile-phone-direct
    button,
    body.mozgo-mobile-forgot-direct
    #login_btn {
        border: 0 !important;

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

        color: #ffffff !important;

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

    body.mozgo-mobile-forgot-direct
    #signup_btn {
        border: 1px solid #e0e2e6 !important;

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

        box-shadow: none !important;
    }

    /* =====================================================
       PÁGINAS PASSWORD DO LARAVEL
    ===================================================== */

    .mozgo-mobile-password-root {
        box-sizing: border-box !important;

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

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

        background: #fffaf8 !important;
    }

    .mozgo-mobile-password-root
    > .container {
        box-sizing: border-box !important;

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

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

    .mozgo-mobile-password-root
    .row,
    .mozgo-mobile-password-root
    [class*="col-md-"] {
        display: block !important;

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

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

    .mozgo-mobile-password-root
    .card {
        width: 100% !important;

        margin: 0 !important;

        border: 1px solid #e6e7eb !important;
        border-radius: 24px !important;

        background: #ffffff !important;

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

    .mozgo-mobile-password-root
    .card-header {
        padding: 27px 21px 8px !important;

        border: 0 !important;

        background: transparent !important;
        color: #121b2e !important;

        font-size: 27px !important;
        font-weight: 850 !important;
    }

    .mozgo-mobile-password-root
    .card-body {
        padding: 18px 21px 23px !important;
    }

    .mozgo-mobile-password-root
    label {
        display: block !important;

        width: 100% !important;

        margin: 0 0 8px !important;

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

        text-align: left !important;
    }

    .mozgo-mobile-password-root
    input:not([type="hidden"]) {
        box-sizing: border-box !important;

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

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

        font-size: 16px !important;
    }

    .mozgo-mobile-password-root
    button {
        width: 100% !important;
        min-height: 56px !important;

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

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

        color: #ffffff !important;

        font-weight: 800 !important;
    }
}

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

@media (max-width: 420px) {

    .mozgo-mobile-register-root,
    body.mozgo-mobile-phone-direct
    .login-register,
    body.mozgo-mobile-forgot-direct
    .login-register,
    .mozgo-mobile-password-root {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .mozgo-mobile-register-card,
    body.mozgo-mobile-phone-direct
    .login-box.card,
    body.mozgo-mobile-forgot-direct
    .login-box.card {
        border-radius: 21px !important;
    }

    .mozgo-mobile-register-card {
        padding: 25px 18px 21px !important;
    }

    body.mozgo-mobile-phone-direct
    .login-box .card-body,
    body.mozgo-mobile-forgot-direct
    .login-box .card-body {
        padding: 26px 18px 21px !important;
    }

    .mozgo-mobile-auth-brand img,
    body.mozgo-mobile-phone-direct
    .login-logo img,
    body.mozgo-mobile-forgot-direct
    .login-logo img {
        max-width: 190px !important;
    }
}