/* ============================================================
   Registration page (/registration/, page 3455)

   The hero is Avada elements, so nothing here touches it. What
   IS here is the MemberPress signup form, which is printed into
   the_content by the plugin — there is no Fusion element to
   style it with, which is the only reason this file exists.

   Colours are Avada globals only. Ben, 2026-08-26: the button
   should match the site buttons — navy fill, jade on hover.
   ============================================================ */

/* Ben: no page title bar here — the hero carries the heading, and a
   "Registration" bar above a "Sign up to join Lighthouse" hero just
   says the same thing twice. Same treatment as the login page. */
.page-id-3455 section.fusion-page-title-bar.fusion-tb-page-title-bar {
    display: none;
}

/* ---------------- the signup form ---------------- */

.lh-reg-form {
    max-width: 560px;
}

.lh-reg-form .mepr-form,
.lh-reg-form .mp_wrapper {
    margin: 0;
}

.lh-reg-form .mp-form-row {
    margin-bottom: 18px;
}

.lh-reg-form .mp-form-label label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--awb-custom_color_1);
}

.lh-reg-form input[type="text"],
.lh-reg-form input[type="email"],
.lh-reg-form input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--awb-color3);
    border-radius: 10px;
    background: var(--awb-color1);
    color: var(--awb-custom_color_1);
}

.lh-reg-form input[type="text"]:focus,
.lh-reg-form input[type="email"]:focus,
.lh-reg-form input[type="password"]:focus {
    outline: none;
    border-color: var(--awb-color5);
    box-shadow: 0 0 0 3px hsla(var(--awb-color5-h), var(--awb-color5-s), var(--awb-color5-l), 0.28);
}

/* MemberPress's show/hide-password control sits INSIDE the field wrapper, and the
   class is on both the wrapper div and the button — hence the tag qualifiers.
   Without this the button drops below the field as a grey block. */
.lh-reg-form div.mp-hide-pw {
    position: relative;
}

.lh-reg-form div.mp-hide-pw input {
    padding-right: 46px;
}

.lh-reg-form button.mp-hide-pw {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--awb-custom_color_12);
    cursor: pointer;
    line-height: 1;
}

/* ---------------- the submit button ----------------
   Matched to the Avada global button: 20px/30px padding, 50px radius,
   17px / 400 weight, .17px letter-spacing, capitalised. Navy fill with a
   jade hover, per Ben. This is CSS rather than an Avada element because
   MemberPress prints the <input type="submit"> itself. */

.lh-reg-form input[type="submit"],
.lh-reg-form .mepr-submit {
    display: inline-block;
    width: auto;
    padding: 20px 30px;
    border: 1px solid var(--awb-custom_color_1);
    border-radius: 50px;
    background: var(--awb-custom_color_1);
    color: var(--awb-color1);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.17px;
    text-transform: capitalize;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lh-reg-form input[type="submit"]:hover,
.lh-reg-form input[type="submit"]:focus,
.lh-reg-form .mepr-submit:hover,
.lh-reg-form .mepr-submit:focus {
    background: var(--awb-color5);
    border-color: var(--awb-color5);
    color: var(--awb-custom_color_1);
}

.lh-reg-form input[type="submit"]:focus-visible {
    outline: 3px solid var(--awb-color4);
    outline-offset: 2px;
}

/* MemberPress's price line. On a free membership it renders "Price: Free", which is
   noise on a sign-up form that never mentions money.
   NOTE the row is .mepr_price — .mepr_price_cell is only the value half, so hiding
   that left the "Price:" label sitting there on its own. Checked against
   memberpress/app/views/checkout/form.php:29 rather than guessed. */
.lh-reg-form .mepr_price,
.lh-reg-form .mepr-payment-methods-wrapper,
.lh-reg-form .mepr-price-terms {
    display: none;
}

/* ---------- already signed in ---------- */

.lh-reg-already {
    max-width: 560px;
    padding: 26px 28px;
    border: 1px solid var(--awb-color3);
    border-radius: 14px;
    background: var(--awb-color2);
}

.lh-reg-already__lead {
    margin: 0 0 4px;
    color: var(--awb-custom_color_1);
    font-size: 1.1rem;
}

.lh-reg-already__who {
    margin: 0 0 20px;
    color: var(--awb-custom_color_12);
}

.lh-reg-already__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin: 0;
}

.lh-reg-already__btn {
    display: inline-block;
    padding: 20px 30px;
    border: 1px solid var(--awb-custom_color_1);
    border-radius: 50px;
    background: var(--awb-custom_color_1);
    color: var(--awb-color1);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.17px;
    text-transform: capitalize;
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lh-reg-already__btn:hover,
.lh-reg-already__btn:focus {
    background: var(--awb-color5);
    border-color: var(--awb-color5);
    color: var(--awb-custom_color_1);
}

.lh-reg-already__alt {
    color: var(--awb-custom_color_12);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lh-reg-already__alt:hover,
.lh-reg-already__alt:focus {
    color: var(--awb-custom_color_1);
}

/* ---------------- the little note under the heading ---------------- */

.lh-reg-note {
    color: var(--awb-custom_color_12);
    margin: 6px 0 26px;
}