/* ==========================================
   PAYREN AUTHENTICATION
========================================== */

.auth-app {

    width: 100%;
    max-width: 780px;

    min-height: 100vh;

    margin: 0 auto;

    background: #101114;

}

.auth-header {

    height: 60px;

    display: grid;

    grid-template-columns: 50px 1fr 50px;

    align-items: center;

    padding: 0 18px;

    background: #1b1e24;

    font-size: 16px;

    text-align: center;

    border-bottom: 1px solid rgba(255,255,255,.06);

}

.auth-back {

    text-align: left;

    font-size: 32px;

    color: #fff;

    line-height: 1;

}

.auth-content {

    width: 100%;
    max-width: 440px;

    margin: 0 auto;

    padding: 40px 22px;

}

.auth-brand {

    text-align: center;

    margin-bottom: 36px;

}

.auth-brand img {

    width: 85px;
    height: 85px;

    object-fit: contain;

    border-radius: 20px;

    margin-bottom: 15px;

}

.auth-brand h1 {

    margin: 0 0 10px;

    font-size: 27px;

    font-weight: 800;

    color: #fff;

}

.auth-brand p {

    margin: 0;

    font-size: 12px;

    color: #9ea4af;

}

.auth-form {

    display: flex;

    flex-direction: column;

    gap: 23px;

}

.form-group {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.form-group label {

    font-size: 12px;

    color: #e4e6ea;

    font-weight: 600;

}

.input-wrapper {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 53px;

    background: #1b1e24;

    border: 1px solid #343943;

    border-radius: 12px;

    transition: border-color .2s;

}

.input-wrapper:focus-within {

    border-color: #e4be69;

}

.input-icon {

    width: 45px;

    text-align: center;

    font-size: 19px;

    color: #e4be69;

}

.input-wrapper input {

    flex: 1;

    width: 100%;
    min-width: 0;

    height: 52px;

    padding: 0 12px 0 0;

    border: 0;

    outline: 0;

    background: transparent;

    color: #fff;

    font-size: 13px;

}

.input-wrapper input::placeholder {

    color: #747b86;

}

.password-label {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.password-label a {

    color: #e4be69;

    font-size: 11px;

}

.password-toggle {

    padding: 8px 12px;

    border: 0;

    background: transparent;

    color: #e4be69;

    font-size: 11px;

    font-weight: 700;

}

.auth-submit {

    width: 100%;

    height: 52px;

    margin-top: 6px;

    border: 0;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #f5d992,
        #d9a94c
    );

    color: #171717;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

}

.auth-submit:hover {

    filter: brightness(1.07);

}

.auth-error {

    padding: 14px;

    margin-bottom: 25px;

    border: 1px solid rgba(255,92,92,.30);

    border-radius: 10px;

    background: rgba(255,92,92,.08);

    color: #ff9999;

    font-size: 12px;

    line-height: 1.6;

}

.auth-divider {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 35px 0 23px;

    color: #7e8591;

    font-size: 10px;

    letter-spacing: 1px;

}

.auth-divider::before,
.auth-divider::after {

    content: '';

    flex: 1;

    height: 1px;

    background: #343943;

}

.auth-register {

    display: flex;

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

    height: 50px;

    border: 1px solid #e4be69;

    border-radius: 12px;

    color: #e4be69;

    font-size: 13px;

    font-weight: 700;

}

.auth-footer {

    margin-top: 30px;

    text-align: center;

    color: #7e8591;

    font-size: 11px;

    line-height: 1.8;

}

.auth-footer a {

    color: #e4be69;

}

@media(max-width: 420px) {

    .auth-content {

        padding: 32px 19px;

    }

    .auth-brand {

        margin-bottom: 30px;

    }

}