/**
 * MBB — Authentication pages (P3-M1)
 *
 * Styles the UsersWP login / register / lost-password forms to match the
 * supplied Log In wireframe and the MBB Brand Identity Guide.
 *
 * Scoped to body.mbb-auth-page so nothing here leaks into other UsersWP forms
 * elsewhere on the site.
 *
 * Actual markup (confirmed on staging 2026-07-20):
 *   .uwp_page > .row > .card > .card-body
 *        h3.card-title            "Login" — hidden, the Elementor heading covers it
 *        form.uwp-login-form.uwp_form
 *        div.uwp-footer-links     Create account / Forgot password
 *
 * UsersWP ships AyeCode's Bootstrap build ("bsui"), so .card, .form-group and
 * .input-group are Bootstrap classes, not UsersWP ones.
 *
 * Typography intentionally inherits from the theme — the brand guide specifies
 * Marykate and Futura and the theme already loads them.
 */

body.mbb-auth-page {
    --mbb-ink:         #143260;
    --mbb-body:        #5a6473;
    --mbb-pink:        #ff4f8b;
    --mbb-teal:        #9bdcd3;
    --mbb-teal-dark:   #7cc9be;
    --mbb-border:      #e8e8ea;
    --mbb-placeholder: #9aa3ae;
    --mbb-field-r:     12px;
}

/* ── Kill the nested card ──────────────────────────────────────
   The Elementor container already provides the white rounded panel.
   UsersWP's own .card must not draw a second one inside it. */

/* .uwp_page .card is the panel itself (confirmed: no Elementor container
   wraps it — .closest('.e-con') returns null). Style it as the wireframe
   card rather than stripping it. */
body.mbb-auth-page .uwp_page .card {
    background: #fff;
    border: 0;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(20, 50, 96, .07);
    padding: 8px;
    max-width: none;
}

body.mbb-auth-page .uwp_page .card-body {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 40px 48px 36px;
}

body.mbb-auth-page .uwp_page .row {
    margin: 0;
}

/* UsersWP prints its own "Login" / "Register" title. The wireframe has none —
   the Elementor heading above the form covers it. */
body.mbb-auth-page .uwp_page .card-title {
    display: none;
}

body.mbb-auth-page form.uwp_form {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* ── Fields ────────────────────────────────────────────────── */

body.mbb-auth-page .uwp_form .form-group {
    margin-bottom: 16px;
}

body.mbb-auth-page .uwp_form input[type="text"],
body.mbb-auth-page .uwp_form input[type="email"],
body.mbb-auth-page .uwp_form input[type="password"] {
    width: 100%;
    height: 62px;
    padding: 0 18px 0 66px;
    border: 1px solid var(--mbb-border);
    border-radius: var(--mbb-field-r);
    font-size: 16px;
    color: var(--mbb-ink);
    background-color: #fff;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.mbb-auth-page .uwp_form input::placeholder {
    color: var(--mbb-placeholder);
    opacity: 1;
}

body.mbb-auth-page .uwp_form input:focus {
    outline: none;
    border-color: var(--mbb-teal);
    box-shadow: 0 0 0 3px rgba(155, 220, 211, .35);
}





/* ── Password show/hide toggle ──────────────────────────────────
   Bootstrap's .input-group puts the toggle button after the field, which
   wrapped onto its own line once the input became full-width. Pin it inside
   the field instead. */

body.mbb-auth-page .uwp_form .input-group {
    position: relative;
    display: block;
}

body.mbb-auth-page .uwp_form .input-group > .form-control {
    width: 100%;
}

body.mbb-auth-page .uwp_form .input-group .input-group-text,
body.mbb-auth-page .uwp_form .input-group button,
body.mbb-auth-page .uwp_form .input-group-append,
body.mbb-auth-page .uwp_form .uwp-toggle-password {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 3;
    height: 42px;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--mbb-placeholder);
    cursor: pointer;
}

body.mbb-auth-page .uwp_form .input-group .input-group-text:hover,
body.mbb-auth-page .uwp_form .input-group button:hover {
    background: #f4f6f8;
    color: var(--mbb-ink);
}

/* ── reCAPTCHA ─────────────────────────────────────────────── */

body.mbb-auth-page .uwp_form .g-recaptcha {
    margin: 18px 0 6px;
}

/* ── Remember me ───────────────────────────────────────────── */

body.mbb-auth-page .uwp_form input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--mbb-teal);
    margin-right: 8px;
    vertical-align: middle;
}

body.mbb-auth-page .uwp_form input[type="checkbox"] + label,
body.mbb-auth-page .uwp_form .form-check-label {
    color: var(--mbb-body);
    font-size: 15px;
    vertical-align: middle;
}

/* ── Submit ────────────────────────────────────────────────── */

body.mbb-auth-page .uwp_form input[type="submit"],
body.mbb-auth-page .uwp_form button[type="submit"],
body.mbb-auth-page .uwp_form .btn-primary {
    width: 100%;
    height: 62px;
    margin-top: 18px;
    border: 0;
    border-radius: var(--mbb-field-r);
    background: var(--mbb-teal);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    transition: background .15s ease, transform .08s ease;
}

body.mbb-auth-page .uwp_form input[type="submit"]:hover,
body.mbb-auth-page .uwp_form button[type="submit"]:hover,
body.mbb-auth-page .uwp_form .btn-primary:hover {
    background: var(--mbb-teal-dark);
}

body.mbb-auth-page .uwp_form input[type="submit"]:active,
body.mbb-auth-page .uwp_form button[type="submit"]:active {
    transform: translateY(1px);
}

body.mbb-auth-page .uwp_form input[type="submit"]:focus-visible,
body.mbb-auth-page .uwp_form button[type="submit"]:focus-visible,
body.mbb-auth-page .uwp-footer-links a:focus-visible {
    outline: 3px solid var(--mbb-pink);
    outline-offset: 2px;
}

/* ── Footer links ──────────────────────────────────────────── */

body.mbb-auth-page .uwp-footer-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
}

body.mbb-auth-page .uwp-footer-links a,
body.mbb-auth-page .uwp_page a {
    color: var(--mbb-pink);
    font-weight: 600;
    text-decoration: none;
}

body.mbb-auth-page .uwp-footer-links a:hover,
body.mbb-auth-page .uwp_page a:hover {
    color: var(--mbb-pink);
    text-decoration: underline;
}

body.mbb-auth-page .uwp-footer-links a::after {
    content: "\00a0\203A";
    font-weight: 700;
}

/* ── Errors and notices ────────────────────────────────────── */

body.mbb-auth-page .uwp-alert-error,
body.mbb-auth-page .uwp_message_error,
body.mbb-auth-page .alert-danger,
body.mbb-auth-page .alert-error {
    background: #fff0f4;
    border: 1px solid #ffd0dd;
    border-radius: var(--mbb-field-r);
    color: #a32048;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 15px;
}

body.mbb-auth-page .uwp-alert-error a,
body.mbb-auth-page .uwp_message_error a,
body.mbb-auth-page .alert-danger a {
    color: #a32048;
    text-decoration: underline;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 640px) {
    body.mbb-auth-page .uwp_form input[type="text"],
    body.mbb-auth-page .uwp_form input[type="email"],
    body.mbb-auth-page .uwp_form input[type="password"],
    body.mbb-auth-page .uwp_form input[type="submit"],
    body.mbb-auth-page .uwp_form button[type="submit"] {
        height: 56px;
    }

    body.mbb-auth-page .uwp-footer-links {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    /* reCAPTCHA has a fixed 304px width and otherwise forces horizontal
       scrolling, which the brief prohibits. */
    body.mbb-auth-page .g-recaptcha {
        transform: scale(.86);
        transform-origin: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.mbb-auth-page * {
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   v1.6.4 — corrections after staging review
   ══════════════════════════════════════════════════════════════ */

/* NOTE — the dark border around the panel is an Elementor container border,
   not a plugin style. An earlier attempt to override it with :has() matched
   both the outer and inner containers and produced a doubled box, so it has
   been removed. Clear the border in Elementor instead: edit the container
   holding the login widget → Style → Border → set to None. */

/* ── Sub-heading ───────────────────────────────────────────── */

body.mbb-auth-page .mbb-auth-sub {
    text-align: center;
    color: var(--mbb-ink);
    font-size: 18px;
    line-height: 1.4;
    margin: -8px 0 30px;
}

body.mbb-auth-page .mbb-auth-sub .mbb-brand {
    color: var(--mbb-pink);
    font-weight: 700;
}

/* ── Password toggle, second attempt ────────────────────────────
   The toggle is not inside a Bootstrap .input-group on this build — it sits
   as a sibling of the password field, which is why it floated above and to
   the right. Anchor it to whichever wrapper actually contains the password
   input. */

/* Password show/hide toggle.
   Real markup: .uwp-password-wrap > .input-group > .input-group-append
   The append carries an INLINE style="top:0;right:0", so those two properties
   must be overridden with !important — nothing else can beat an inline style. */

body.mbb-auth-page .uwp_form .uwp-password-wrap {
    position: relative;
}

body.mbb-auth-page .uwp_form .uwp-password-wrap .input-group {
    position: static;
}

body.mbb-auth-page .uwp_form .uwp-password-wrap .input-group-append {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%);
    z-index: 3;
    height: auto;
    margin: 0;
}

body.mbb-auth-page .uwp_form .uwp-password-wrap .input-group-append .input-group-text {
    background: transparent;
    border: 0;
    padding: 8px;
    color: var(--mbb-placeholder);
    cursor: pointer;
}

body.mbb-auth-page .uwp_form .uwp-password-wrap .input-group-append .input-group-text:hover {
    color: var(--mbb-ink);
}

/* password field now needs room for the icon on its right */
body.mbb-auth-page .uwp_form input[type="password"] {
    padding-right: 52px;
}

/* ── Errors and notices ────────────────────────────────────── */

body.mbb-auth-page .uwp-alert-error,
body.mbb-auth-page .uwp_message_error,
body.mbb-auth-page .alert-danger,
body.mbb-auth-page .alert-error {
    background: #fff0f4;
    border: 1px solid #ffd0dd;
    border-radius: var(--mbb-field-r);
    color: #a32048;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 15px;
}

body.mbb-auth-page .uwp-alert-error a,
body.mbb-auth-page .uwp_message_error a,
body.mbb-auth-page .alert-danger a {
    color: #a32048;
    text-decoration: underline;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 640px) {
    body.mbb-auth-page .uwp_form input[type="text"],
    body.mbb-auth-page .uwp_form input[type="email"],
    body.mbb-auth-page .uwp_form input[type="password"],
    body.mbb-auth-page .uwp_form input[type="submit"],
    body.mbb-auth-page .uwp_form button[type="submit"] {
        height: 56px;
    }

    body.mbb-auth-page .uwp-footer-links {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    /* reCAPTCHA has a fixed 304px width and otherwise forces horizontal
       scrolling, which the brief prohibits. */
    body.mbb-auth-page .g-recaptcha {
        transform: scale(.86);
        transform-origin: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.mbb-auth-page * {
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   v1.6.4 — corrections after staging review
   ══════════════════════════════════════════════════════════════ */

/* NOTE — the dark border around the panel is an Elementor container border,
   not a plugin style. An earlier attempt to override it with :has() matched
   both the outer and inner containers and produced a doubled box, so it has
   been removed. Clear the border in Elementor instead: edit the container
   holding the login widget → Style → Border → set to None. */

/* ── Sub-heading ───────────────────────────────────────────── */

body.mbb-auth-page .mbb-auth-sub {
    text-align: center;
    color: var(--mbb-ink);
    font-size: 18px;
    line-height: 1.4;
    margin: -8px 0 30px;
}

body.mbb-auth-page .mbb-auth-sub .mbb-brand {
    color: var(--mbb-pink);
    font-weight: 700;
}

/* ── Password toggle, second attempt ────────────────────────────
   The toggle is not inside a Bootstrap .input-group on this build — it sits
   as a sibling of the password field, which is why it floated above and to
   the right. Anchor it to whichever wrapper actually contains the password
   input. */

/* Anchor only the toggle itself. Targeting the password field's wrapper by
   position proved unsafe — the wrapper contains the input, so absolutely
   positioning it moved the whole field. Class-based targeting only. */

body.mbb-auth-page .uwp_form .form-group,
body.mbb-auth-page .uwp_form .uwp-password-wrap {
    position: relative;
}

body.mbb-auth-page .uwp_form [class*="password-toggle"],
body.mbb-auth-page .uwp_form [class*="toggle-password"],
body.mbb-auth-page .uwp_form [class*="show-password"],
body.mbb-auth-page .uwp_form .uwp-eye {
    position: absolute;
    top: 50%;
    right: 10px;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
    z-index: 3;
    margin: 0;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--mbb-placeholder);
    cursor: pointer;
}

body.mbb-auth-page .uwp_form [class*="password-toggle"]:hover,
body.mbb-auth-page .uwp_form [class*="toggle-password"]:hover,
body.mbb-auth-page .uwp_form [class*="show-password"]:hover {
    background: #f4f6f8;
    color: var(--mbb-ink);
}

/* Browser autofill repaints the field background (the pale-blue fill seen on
   staging), which hid the icons. Force it back to white and keep the ink dark. */
body.mbb-auth-page .uwp_form input:-webkit-autofill,
body.mbb-auth-page .uwp_form input:-webkit-autofill:hover,
body.mbb-auth-page .uwp_form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--mbb-ink);
    -webkit-box-shadow: 0 0 0 40px #fff inset;
    box-shadow: 0 0 0 40px #fff inset;
    transition: background-color 9999s ease-in-out 0s;
}

/* ── Overlaid field icons (JS-placed) ───────────────────────────
   Replaces the old background-image approach so icons stay visible over
   autofill backgrounds and never clash with the password toggle. */

body.mbb-auth-page .uwp_form .mbb-field {
    position: relative;
}

body.mbb-auth-page .uwp_form .mbb-field-icon {
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

/* label is screen-reader-only already (.sr-only), but guard the icon's top
   reference against it just in case a theme unhides it */
body.mbb-auth-page .uwp_form .mbb-field .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
}