/* ==========================================================================
   pers-auth.css  -  Login / Register / Recover / Forgot-password pages

   Scoped to the auth body classes (login / register / recover / forgot). It
   restyles the existing Osclass form markup - no logic changes, so recaptcha,
   validation and the UserForm calls all keep working - into a centered rounded
   card that matches the account, listing and post-form pages. All accents come
   from the theme tokens, so it stays correct under every colour scheme.
   ========================================================================== */

body.login .loginbox,
body.register .registerbox,
body.recover .registerbox,
body.forgot .registerbox {
    padding: 44px 0 64px;
}

/* ---- the card ---- */
body.login .login-register,
body.register .login-register,
body.recover .login-register,
body.forgot .login-register {
    max-width: 440px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    box-shadow: 0 10px 34px -14px rgba(16,24,40,.20);
    padding: 32px 32px 26px;
}

/* ---- logo + heading ---- */
.pers-auth-logo { display: block; text-align: center; margin: 0 0 10px; }
.pers-auth-logo a { display: inline-block; }
.pers-auth-logo img { max-height: 42px; width: auto; display: inline-block; }
.pers-auth-logo .logoname { font-size: 22px; font-weight: 800; color: var(--pers-primary); }
body.login .login-register h2,
body.register .login-register h2,
body.recover .login-register h2,
body.forgot .login-register h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1d2939;
    text-align: center;
    margin: 6px 0 22px;
    padding: 0;
    border: 0;
}

/* ---- error list ---- */
.login-register #error_list { list-style: none; padding: 0; margin: 0 0 14px; }
.login-register #error_list li {
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13.5px;
    margin-bottom: 8px;
}

/* ---- inputs ---- */
.login-register .form-group { margin-bottom: 14px; }
body.login .login-register .form-control,
body.register .login-register .form-control,
body.recover .login-register .form-control,
body.forgot .login-register .form-control {
    height: auto;
    min-height: 46px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14.5px;
    box-shadow: none;
}
body.login .login-register .form-control:focus,
body.register .login-register .form-control:focus,
body.recover .login-register .form-control:focus,
body.forgot .login-register .form-control:focus {
    border-color: var(--pers-primary);
    box-shadow: 0 0 0 3px var(--pers-primary-soft, rgba(52,146,225,.18));
    outline: 0;
}

/* ---- primary button (full width) ---- */
body.login .login-register .btn-clr,
body.register .login-register .btn-clr,
body.recover .login-register .btn-clr,
body.forgot .login-register .btn-clr {
    display: block;
    width: 100%;
    border-radius: 10px;
    padding: 13px 18px;
    font-weight: 700;
    font-size: 15px;
    float: none;
}

/* ---- login row: remember-me above the button ---- */
body.login .login-register .clearfix {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
}
body.login .login-register .clearfix .checkbox.pull-right {
    float: none !important;
    margin: 0;
    text-align: left;
}
.login-register .checkbox label { font-weight: 500; color: #475467; font-size: 13.5px; }

/* ---- register row: terms below the button ---- */
body.register .login-register .clearfix {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.login-register .terms {
    float: none !important;
    width: auto !important;
    padding: 0;
}
.login-register .terms small { color: #667085; font-size: 12.5px; line-height: 1.5; }
.login-register .terms a,
.login-register .clr { color: var(--pers-primary); }

/* ---- recaptcha ---- */
.login-register .form-group .g-recaptcha { display: inline-block; }

/* ---- footer links ---- */
.login-register .panel-footer {
    background: transparent;
    border: 0;
    border-top: 1px solid #f2f4f7;
    padding: 16px 0 0;
    margin-top: 18px;
    font-size: 13.5px;
    text-align: center;
    color: #667085;
    border-radius: 0;
}
.login-register .panel-footer a { color: var(--pers-primary); font-weight: 600; }
.login-register .panel-footer a.pull-right { float: none; margin-left: 10px; }

/* ==========================================================================
   Social login buttons (Continue with Google / Facebook)
   Rendered by pers_social_login_buttons(); each links to pers_social_login_url()
   which a social-login plugin populates. With no plugin they render as visual
   placeholders (see .pers-auth-social-disabled).
   ========================================================================== */
.pers-auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #98a2b3;
    font-size: 12px;
    margin: 20px 0 14px;
}
.pers-auth-divider::before,
.pers-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #eaecf0;
}
.pers-auth-divider span {
    padding: 0 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
/* Both providers share one clean, neutral button so the row looks consistent.
   The brand identity comes from the inline-SVG logo (multi-colour Google 'G',
   blue Facebook 'f'), not from the button fill - which is the modern pattern
   Dubizzle / Bayut and Google's own brand guidelines use. */
.pers-auth-social { display: flex; flex-direction: column; gap: 10px; }
.pers-auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 46px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #344054;
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pers-auth-social-btn:hover {
    background: #f9fafb;
    border-color: #c8cdd4;
    color: #344054;
    text-decoration: none;
}
.pers-auth-social-btn .pers-auth-social-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    line-height: 0;
}
.pers-auth-social-btn .pers-auth-social-ico svg { width: 18px; height: 18px; display: block; }
.pers-auth-social-btn .pers-auth-social-label { line-height: 1; }
/* Plugin not installed or disabled: pers_social_login_buttons() adds the
   .pers-auth-social-disabled class (plus aria-disabled + onclick return false),
   so render the buttons as clearly dead - muted grey pill, greyed-out logo,
   not-allowed cursor - instead of looking active and clickable. When the
   plugin is active the class is absent and the buttons use the normal style. */
.pers-auth-social-disabled {
    background: #f2f4f7;
    border-color: #e4e7ec;
    color: #98a2b3;
    cursor: not-allowed;
}
.pers-auth-social-disabled:hover {
    background: #f2f4f7;
    border-color: #e4e7ec;
    color: #98a2b3;
    box-shadow: none;
}
.pers-auth-social-disabled .pers-auth-social-ico svg { filter: grayscale(1); opacity: .45; }

/* ---- responsive ---- */
@media (max-width: 480px) {
    body.login .login-register,
    body.register .login-register,
    body.recover .login-register,
    body.forgot .login-register { padding: 26px 20px 22px; margin: 0 14px; }
}

/* Login footer: register on the left, forgot password on the right */
.pers-auth-links { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pers-auth-links a { float: none; }