/* Styles for resources/views/website/vendor/auth/_auth-styles.blade.php */

/* Form column: 488px wide in the design, no extra side padding. */
#main .auth.pp-auth .pad {
    padding: 0;
}

/* Header 3 — 28px SemiBold, line-height 1.4 */
#main .auth.pp-auth .t1 {
    margin-bottom: var(--pp-space-40);
    font-size: var(--pp-fs-h3);
    font-weight: 600;
    line-height: 1.4;
    color: var(--pp-black);
}

/* Title followed by a lede: 24px between them, 40px to the form. */
#main .auth.pp-auth .t1.pp-auth__title--lede {
    margin-bottom: var(--pp-space-24);
}

#main .auth.pp-auth .desc2 {
    margin-bottom: var(--pp-space-40);
    font-size: var(--pp-fs-body2);
    line-height: 1.5;
    color: var(--pp-black);
}

#main .auth.pp-auth .desc {
    margin-bottom: 0;
    font-size: var(--pp-fs-body1);
    line-height: 24px;
    color: var(--pp-black);
}

#main .auth.pp-auth .desc .mb20 {
    margin-bottom: var(--pp-space-24);
}

#main .auth.pp-auth .desc .mb20:last-child {
    margin-bottom: 0;
}

/* Text Field: label 14 Medium, 8px gap, 40px input, 8px radius. */
#main .auth.pp-auth .form-group {
    margin-bottom: var(--pp-space-24);
}

#main .auth.pp-auth .form-group > label {
    display: block;
    margin-bottom: var(--pp-space-8);
    font-family: var(--pp-font);
    font-size: var(--pp-fs-body2);
    font-weight: 500;
    line-height: normal;
    color: var(--pp-black);
}

#main .auth.pp-auth .form-group label .red {
    color: var(--pp-pink-100);
}

#main .auth.pp-auth .form-control {
    height: 40px;
    min-height: 40px;
    padding: 0 var(--pp-space-16);
    border: 1px solid var(--pp-grey-50);
    border-radius: var(--pp-radius-input);
    font-size: var(--pp-fs-body2);
    line-height: normal;
    color: var(--pp-black);
}

#main .auth.pp-auth .form-control.password-field {
    padding-right: 44px;
}

#main .auth.pp-auth .form-control:focus {
    border-color: var(--pp-purple-100);
    box-shadow: 0 0 0 3px var(--pp-purple-10);
}

#main .auth.pp-auth .form-control::placeholder {
    color: var(--pp-grey-70);
    top: 0;
}

/* Eye icon centred on the 40px field. Half the field's height rather
   than 50%: the validation message sits inside the same wrapper, and
   50% would move the eye when it shows. */
#main .auth.pp-auth .form-group .pos-rel .toggle-password {
    top: 20px;
    right: var(--pp-space-16);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: var(--pp-grey-70);
}

/* "Forgot password?" — Link style: 14 SemiBold, purple, underlined,
   4px under the password field. */
#main .auth.pp-auth .form-group.mb8 {
    margin-bottom: 0;
}

#main .auth.pp-auth .link {
    margin-top: var(--pp-space-4);
}

#main .auth.pp-auth .link a {
    font-size: var(--pp-fs-body2);
    font-weight: 600;
    line-height: normal;
    color: var(--pp-purple-100);
    text-decoration: underline;
}

#main .auth.pp-auth .link a:hover {
    color: var(--pp-purple-50);
}

/* Primary action: 280 x 48, 16 SemiBold. */
#main .auth.pp-auth .link-btn {
    margin: var(--pp-space-32) 0 var(--pp-space-24);
}

/* After a form: 40px from the last field, which already carries a 24px
   bottom margin. */
#main .auth.pp-auth .link-btn.mt0 {
    margin-top: calc(var(--pp-space-40) - var(--pp-space-24));
}

#main .auth.pp-auth .link-btn button.hvr-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    min-width: 0;
    max-width: 100%;
    height: 48px;
    padding: 12px 28px;
    border-width: 1.5px;
    border-radius: var(--pp-radius-button);
    font-size: var(--pp-fs-body1);
    font-weight: 600;
    line-height: 26px;
}

/* Footer line: Body 1, link SemiBold purple and underlined. */
#main .auth.pp-auth .link-text {
    margin-bottom: var(--pp-space-40);
    font-size: var(--pp-fs-body1);
    line-height: 24px;
    color: var(--pp-black);
}

#main .auth.pp-auth .link-text a {
    font-weight: 600;
    color: var(--pp-purple-100);
    text-decoration: underline;
}

/* front.css draws its own underline with a:before */
#main .auth.pp-auth .link-text a:before {
    display: none;
}

#main .auth.pp-auth .link-text a:hover {
    color: var(--pp-purple-50);
}

#main .auth.pp-auth .box-error {
    margin: 0 0 var(--pp-space-24);
    border-radius: var(--pp-radius-input);
}

/* Centred status screens (Email Verification Successful, Pending admin
   approval): 592px column, 166 x 140 illustration, 24px rhythm. */
#main .auth.pp-auth.pp-auth--status .pp-auth__col {
    max-width: 592px;
    margin: 0 auto;
}

#main .auth.pp-auth.pp-auth--status .img-success {
    margin-bottom: var(--pp-space-24);
}

#main .auth.pp-auth.pp-auth--status .img-success img {
    width: 166px;
    max-width: 100%;
    height: auto;
}

#main .auth.pp-auth.pp-auth--status .t1 {
    margin-bottom: var(--pp-space-24);
}

@media (max-width: 767px) {
    #main .auth.pp-auth .t1 {
        font-size: var(--pp-fs-h4);
        margin-bottom: var(--pp-space-24);
    }

    #main .auth.pp-auth .desc {
        font-size: var(--pp-fs-body2);
        line-height: 22px;
    }

    #main .auth.pp-auth .link-text {
        font-size: var(--pp-fs-body2);
        line-height: 22px;
    }
}