/* Branded auth pages (/login, /forgot-password, /password-reset, /account)
   and MemberPress shortcode overrides. */

/* Layout (shared with signup poster) */
.cg3-auth { display: grid; grid-template-columns: 1fr 1.2fr; min-height: calc(100vh - 80px); }
.cg3-auth__poster {
    background: #000; color: #fff; padding: 60px;
    border-right: var(--border-w) solid #000;
    position: relative; overflow: hidden;
}
.cg3-auth__title {
    margin-top: 28px;
    font-family: var(--font-hero); font-size: clamp(56px, 9vw, 96px);
    line-height: 0.88; letter-spacing: -1.5px; text-transform: uppercase;
}
.cg3-auth__lede { margin-top: 24px; font-size: 16px; line-height: 1.6; color: var(--c-text-on-dark-2); max-width: 480px; }
.cg3-auth__perks { margin: 40px 0 24px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cg3-auth__perks li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--c-text-on-dark-2); }
.cg3-auth__form { padding: 60px 80px; background: #fff; color: #000; }
.cg3-auth__field-form { margin-top: 24px; display: flex; flex-direction: column; gap: 22px; max-width: 480px; }
.cg3-auth__field-form .cg3-btn { width: 100%; justify-content: center; }
.cg3-auth__alt   { margin-top: 18px; font-size: 13px; }
.cg3-auth__alt a { text-decoration: underline; }
.cg3-auth__foot  { margin-top: 28px; padding-top: 18px; border-top: var(--border-w) solid #000; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #666; }
.cg3-auth__foot a { color: #000; text-decoration: underline; }
.cg3-auth__msg   { padding: 14px 18px; border: var(--border-w) solid #000; box-shadow: var(--shadow-3); font-size: 14px; }
.cg3-auth__msg.is-ok  { background: var(--c-green); color: #000; }
.cg3-auth__msg.is-err { background: #fff; color: var(--c-danger); }

/* ─────────────────────────────────────────────────────────────────────────
   MemberPress shortcode overrides — MP wraps everything in .mepr-* classes.
   We restyle to match the neobrutalist system without touching plugin files.
   ───────────────────────────────────────────────────────────────────────── */

.cg3-mp-wrap { font-family: var(--font-body); color: #000; }

.cg3-mp-wrap form,
.cg3-mp-wrap .mepr_login,
.cg3-mp-wrap .mepr-signup-form,
.cg3-mp-wrap .mepr-registration-form,
.cg3-mp-wrap #mepr-loginform {
    max-width: 560px;
    margin-top: 28px;
}

/* Each row that MP renders */
.cg3-mp-wrap p,
.cg3-mp-wrap .mp_wrapper p,
.cg3-mp-wrap .mepr-form-row,
.cg3-mp-wrap .mepr_box {
    margin: 0 0 18px;
    display: flex; flex-direction: column; gap: 8px;
}

.cg3-mp-wrap label,
.cg3-mp-wrap .mepr-form-label {
    font-family: var(--font-body); font-size: 11px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase; color: #000;
}
.cg3-mp-wrap label .mepr_required,
.cg3-mp-wrap .mepr-required-field-mark { color: var(--c-danger); margin-left: 4px; }

.cg3-mp-wrap input[type="text"],
.cg3-mp-wrap input[type="email"],
.cg3-mp-wrap input[type="password"],
.cg3-mp-wrap input[type="tel"],
.cg3-mp-wrap input[type="number"],
.cg3-mp-wrap select,
.cg3-mp-wrap textarea,
.cg3-mp-wrap .StripeElement {
    width: 100%;
    border: var(--border-w) solid #000;
    box-shadow: 3px 3px 0 0 #000;
    background: #fff; padding: 14px 16px;
    font-family: var(--font-body); font-size: 15px; color: #000;
    border-radius: var(--radius);
}
.cg3-mp-wrap input:focus,
.cg3-mp-wrap select:focus,
.cg3-mp-wrap textarea:focus { outline: none; box-shadow: 4px 4px 0 0 var(--c-green); }

/* Submit buttons */
.cg3-mp-wrap input[type="submit"],
.cg3-mp-wrap button[type="submit"],
.cg3-mp-wrap .mepr-submit {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 22px 30px;
    background: var(--c-green); color: #000;
    border: var(--border-w) solid #000; border-radius: var(--radius);
    box-shadow: var(--shadow-4);
    font-family: var(--font-body); font-weight: 800; font-size: 16px;
    letter-spacing: 1.2px; text-transform: uppercase;
    cursor: pointer;
    width: 100%; justify-content: center;
    margin-top: 4px;
}
.cg3-mp-wrap input[type="submit"]:hover,
.cg3-mp-wrap button[type="submit"]:hover,
.cg3-mp-wrap .mepr-submit:hover {
    transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 #000;
}

/* MemberPress checkbox / radio rows */
.cg3-mp-wrap .mepr-tos-label,
.cg3-mp-wrap .mepr-checkbox-row { flex-direction: row; align-items: center; gap: 10px; font-size: 13px; color: #444; }
.cg3-mp-wrap input[type="checkbox"],
.cg3-mp-wrap input[type="radio"] { width: 18px; height: 18px; accent-color: var(--c-green); margin: 0; }

/* Price / total rows MP renders */
.cg3-mp-wrap .mepr-price-terms,
.cg3-mp-wrap .mepr_price {
    margin: 24px 0;
    padding: 16px 20px;
    background: var(--c-paper);
    border: var(--border-w) solid #000;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
}

/* Validation / errors */
.cg3-mp-wrap .mepr-error,
.cg3-mp-wrap .mepr_error,
.cg3-mp-wrap .mepr-form-has-errors {
    padding: 14px 18px; background: #fff;
    border: var(--border-w) solid var(--c-danger);
    box-shadow: 3px 3px 0 0 var(--c-danger);
    color: var(--c-danger);
    font-size: 14px;
    margin-bottom: 18px;
}

/* "Remember me" + lost password row inside the login form */
.cg3-mp-wrap .login-remember,
.cg3-mp-wrap .mepr-login-extra {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px;
    margin: 0 0 18px;
}

/* Stripe Elements iframe — neobrutalist border + shadow */
.cg3-mp-wrap .StripeElement {
    padding: 16px;
    min-height: 48px;
}
.cg3-mp-wrap .StripeElement--focus { box-shadow: 4px 4px 0 0 var(--c-green); }

/* Hide browser-native password reveal icons (Edge/Chromium) so we only show the MP toggle */
.cg3-mp-wrap input[type="password"]::-ms-reveal,
.cg3-mp-wrap input[type="password"]::-ms-clear,
.cg3-mp-wrap input[type="password"]::-webkit-credentials-auto-fill-button,
.cg3-mp-wrap input[type="password"]::-webkit-textfield-decoration-container { display: none !important; }

/* MemberPress password toggle (.mp-hide-pw) — wrapped in .cg3-pw-wrap (via JS in page-signup)
   so the toggle button can be absolute-positioned inside the input's bounding box. */
.cg3-mp-wrap .cg3-pw-wrap {
    position: relative;
    display: block;
}
.cg3-mp-wrap .cg3-pw-wrap input[type="password"],
.cg3-mp-wrap .cg3-pw-wrap input[type="text"] {
    width: 100%;
    padding-right: 78px !important; /* leave room for the SHOW/HIDE button */
}

.cg3-mp-wrap button.mp-hide-pw,
.cg3-mp-wrap .button.mp-hide-pw {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%);
    z-index: 2;
    background: var(--c-green) !important;
    color: #000 !important;
    border: var(--border-w) solid #000 !important;
    border-radius: var(--radius);
    box-shadow: 2px 2px 0 0 #000 !important;
    width: auto !important;
    height: auto !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    cursor: pointer;
    font-family: var(--font-body) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    min-width: 0 !important;
}
.cg3-mp-wrap button.mp-hide-pw:hover { transform: translateY(-50%) translate(-1px, -1px); box-shadow: 3px 3px 0 0 #000 !important; }
.cg3-mp-wrap button.mp-hide-pw::before {
    content: "SHOW";
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #000;
}
.cg3-mp-wrap button.mp-hide-pw[data-toggle="1"]::before,
.cg3-mp-wrap button.mp-hide-pw[aria-label="Hide password"]::before { content: "HIDE"; }
.cg3-mp-wrap button.mp-hide-pw .dashicons,
.cg3-mp-wrap button.mp-hide-pw .text { display: none !important; }

/* Signup-specific tweaks */
.su__plan-switch { margin-top: 28px; font-size: 13px; color: var(--c-text-on-dark-2); font-family: var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; }
.su__plan-switch a { color: var(--c-green); text-decoration: underline; }
.su__form-warning { padding: 14px 18px; background: #fff; border: var(--border-w) solid var(--c-danger); color: var(--c-danger); font-size: 14px; margin-top: 24px; }

/* Responsive */
@media (max-width: 1100px) {
    .cg3-auth { grid-template-columns: 1fr; }
    .cg3-auth__poster, .cg3-auth__form { padding: 40px 32px; border-right: 0; }
}
@media (max-width: 640px) {
    .cg3-auth__poster, .cg3-auth__form { padding: 32px 20px; }
}