@font-face {

    font-family: 'Shabnam';

    src:
        url('/wp-content/themes/twentytwentyfive/templates/shabnam-font-v2.4.0/Shabnam.woff2')
        format('woff2');

}


.mk-login {

    width: min(
        100% - 24px,
        430px
    );

    margin: 40px auto;

    direction: rtl;

    font-family:
        'Shabnam',
        Tahoma,
        sans-serif;

}


.mk-login-card {

    background: #fff;

    border:
        1px solid #e1ebe8;

    border-radius: 24px;

    padding: 25px 20px;

    box-shadow:
        0 12px 35px
        rgba(24,58,52,.08);

}


.mk-login-icon {

    width: 60px;
    height: 60px;

    margin: 0 auto 15px;

    display: flex;

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

    border-radius: 18px;

    background: #e7f7f2;

    font-size: 28px;

}


.mk-login-title {

    margin: 0;

    text-align: center;

    color: #18352f;

    font-size: 22px;

    font-weight: 900;

}


.mk-login-description {

    margin:
        7px
        0
        25px;

    text-align: center;

    color: #82918d;

    font-size: 12px;

}


.mk-login-step {

    display: none;

}


.mk-login-step.active {

    display: block;

}


.mk-login-label {

    display: block;

    margin-bottom: 7px;

    color: #38534d;

    font-size: 13px;

    font-weight: 800;

}


.mk-login-input {

    width: 100%;

    height: 52px;

    padding:
        0
        14px;

    border:
        1px solid #dce8e5;

    border-radius: 13px;

    background: #fbfdfc;

    color: #18352f;

    font-family: inherit;

    font-size: 16px;

    outline: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;

}


.mk-login-input:focus {

    border-color: #08a47f;

    background: #fff;

    box-shadow:
        0 0 0 3px
        rgba(8,164,127,.09);

}


.mk-login-button {

    width: 100%;

    height: 52px;

    margin-top: 14px;

    border: 0;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #087463,
            #08a47f
        );

    color: #fff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;

}


.mk-login-button:disabled {

    opacity: .55;

    cursor: not-allowed;

}


.mk-login-link {

    width: 100%;

    margin-top: 13px;

    padding: 8px;

    border: 0;

    background: transparent;

    color: #078e70;

    font-family: inherit;

    font-size: 12px;

    cursor: pointer;

}


.mk-otp-input {

    direction: ltr;

    text-align: center;

    letter-spacing: 7px;

    font-size: 22px;

    font-weight: 900;

}


.mk-otp-info {

    margin:
        0
        0
        20px;

    padding: 11px;

    border-radius: 12px;

    background: #f2faf7;

    color: #62746f;

    font-size: 11px;

    line-height: 1.9;

    text-align: center;

}


.mk-otp-info strong {

    color: #087463;

}


.mk-countdown {

    margin-top: 12px;

    text-align: center;

    color: #82918d;

    font-size: 11px;

}


.mk-login-message {

    display: none;

    margin-top: 15px;

    padding: 11px;

    border-radius: 12px;

    text-align: center;

    font-size: 11px;

    line-height: 1.8;

}


.mk-login-message.show {

    display: block;

}


.mk-login-message.error {

    background: #fff5f5;

    border:
        1px solid #f0d8d8;

    color: #c65b5b;

}


.mk-login-message.success {

    background: #edf9f5;

    border:
        1px solid #d5eee5;

    color: #087463;

}


@media (max-width: 480px) {

    .mk-login {

        margin:
            20px auto;

    }

}