/* ============================================================
   Growth Pathways — MemberPress surfaces
   Registration form, login, and account pages ship with plugin
   defaults (rounded corners, generic blue). The deployed brand
   always wins over plugin styling, so they are re-skinned here.
   All colors reference Elementor Global Colors, so a rebrand
   from Site Settings still flows through.
   ============================================================ */

.mp_wrapper,
.mepr-login-form-wrap,
.mepr_account_page,
.mp-form-wrapper {
  font-family: Archivo, Helvetica, Arial, sans-serif;
  color: var(--e-global-color-gpsteel);
}

.mp-form-row,
.mepr-form-row,
.mp_wrapper .mp-form-row {
  margin-bottom: 20px;
}

/* ---- Labels read as the brand's mono eyebrow ---- */
.mp_wrapper label,
.mepr-login-form-wrap label,
.mp-form-label label {
  display: block;
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--e-global-color-gpsteel);
  margin-bottom: 8px;
  font-weight: 600;
}
.mp_wrapper .cc-error,
.mepr-form-has-errors {
  color: #A8342A;
}

/* ---- Square inputs, brand rule color, signal focus ---- */
.mp_wrapper input[type=text],
.mp_wrapper input[type=email],
.mp_wrapper input[type=password],
.mp_wrapper input[type=tel],
.mp_wrapper input[type=url],
.mp_wrapper input[type=number],
.mp_wrapper select,
.mp_wrapper textarea,
.mepr-login-form-wrap input[type=text],
.mepr-login-form-wrap input[type=password] {
  width: 100%;
  font-family: Archivo, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  padding: 14px 16px;
  color: var(--e-global-color-gpgraph);
  background: var(--e-global-color-gpwhite);
  border: 1px solid var(--e-global-color-gprule);
  border-radius: 0 !important;
  box-shadow: none;
  transition: border-color .16s ease;
}

.mp_wrapper input:focus,
.mp_wrapper select:focus,
.mp_wrapper textarea:focus,
.mepr-login-form-wrap input:focus {
  border-color: var(--e-global-color-gpsignal);
  outline: 2px solid var(--e-global-color-gpsignal);
  outline-offset: 1px;
}

.mp_wrapper select {
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--e-global-color-gpsteel) 50%),
    linear-gradient(135deg, var(--e-global-color-gpsteel) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* ---- Submit buttons take the brand button ---- */
.mp_wrapper input[type=submit],
.mp_wrapper button[type=submit],
.mepr-login-form-wrap input[type=submit],
.mepr-submit,
.mp_wrapper .mepr-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Archivo, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 15px 32px;
  color: var(--e-global-color-gpwhite);
  background: var(--e-global-color-gpsignal);
  border: 1px solid var(--e-global-color-gpsignal);
  border-radius: 0 !important;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
  text-transform: none;
  width: auto;
}
.mp_wrapper input[type=submit]:hover,
.mp_wrapper button[type=submit]:hover,
.mepr-login-form-wrap input[type=submit]:hover,
.mepr-submit:hover {
  background: var(--e-global-color-gpsigdp);
  border-color: var(--e-global-color-gpsigdp);
  color: var(--e-global-color-gpwhite);
}

/* ---- Checkbox and consent rows ---- */
.mp_wrapper input[type=checkbox],
.mp_wrapper input[type=radio] {
  width: auto;
  margin-right: 8px;
  accent-color: var(--e-global-color-gpsignal);
}
.mp_wrapper .mepr_checkbox label,
.mp_wrapper label.mepr-checkbox-field {
  display: inline;
  font-family: Archivo, Helvetica, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--e-global-color-gpsteel);
}

/* ---- Price / free notice ---- */
.mp_wrapper .mepr-price-string,
.mp_wrapper .mepr_price {
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--e-global-color-gpgrey); font-weight: 600;
}

/* ---- Messages ---- */
.mepr_error,
.mepr_success,
.mp_wrapper .mepr_error,
.mp_wrapper .mepr_success {
  border-radius: 0 !important;
  border-left: 3px solid;
  padding: 14px 18px;
  font-size: 14px;
}
.mepr_error { border-left-color: #A8342A; background: #F8E7E5; color: #7A2620; }
.mepr_success { border-left-color: var(--e-global-color-gpsignal); background: #E8EEFC; color: var(--e-global-color-gpgraph); }

/* ---- The registration section sits on graphite ---- */
#register #gp-regform .mp_wrapper { color: var(--e-global-color-gpsteel); }
#register a { color: var(--e-global-color-gpsigmid); }
#register a:hover { color: var(--e-global-color-gpwhite); }

/* ---- Login and account pages ---- */
.mepr-login-form-wrap,
.mepr_account_page {
  max-width: 520px;
  margin: 0 auto;
}
.mepr-account-nav,
.mepr-nav-item {
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600;
}
.mepr-account-nav a,
.mepr-nav-item a {
  color: var(--e-global-color-gpsteel);
  text-decoration: none;
  border-bottom: 1px solid var(--e-global-color-gprule);
  padding-bottom: 4px;
}
.mepr-account-nav a:hover,
.mepr-nav-item a:hover,
.mepr-nav-item.mepr-active-nav-tab a {
  color: var(--e-global-color-gpsignal);
  border-bottom-color: var(--e-global-color-gpsignal);
}

/* ---- Courses: keep the LMS on brand too ---- */
.mpcs-course-title,
.mpcs-lesson-title,
h1.mpcs-title {
  font-family: Archivo, Helvetica, Arial, sans-serif;
  letter-spacing: -.03em;
  color: var(--e-global-color-gpgraph);
}
.mpcs-progress-bar,
.mpcs-progress {
  border-radius: 0 !important;
}
.mpcs-progress-bar > div,
.mpcs-progress-bar-inner {
  background: var(--e-global-color-gpsignal) !important;
  border-radius: 0 !important;
}
.mpcs-button,
.mpcs-navigation a,
a.mpcs-button {
  border-radius: 0 !important;
  font-family: Archivo, Helvetica, Arial, sans-serif;
  font-weight: 600;
  background: var(--e-global-color-gpsignal);
  border-color: var(--e-global-color-gpsignal);
}
.mpcs-button:hover,
a.mpcs-button:hover {
  background: var(--e-global-color-gpsigdp);
  border-color: var(--e-global-color-gpsigdp);
}

/* ============================================================
   Registration form polish
   ============================================================ */

/* Foundations is provided by the company and the copy beside the form already
   says so, so the plugin's "Price: Free" row is noise. */
.mp_wrapper .mepr_price,
.mp_wrapper .mp-form-row.mepr_price {
  display: none;
}

/* MemberPress prints a .cc-error placeholder under every field and relies on
   its own stylesheet to hide them. That stylesheet only hides the ones inside
   address groups, so every field showed a permanent red "... is Required" on
   first load. Hide them by default. The validation script reveals a real error
   by setting an inline display, which beats this rule, so genuine errors still
   appear. No !important here, deliberately. */
.mp_wrapper .cc-error {
  display: none;
}

/* MemberPress adds a show/hide toggle beside each password field, drawn with a
   dashicons glyph. Dashicons is not enqueued on the front end for logged-out
   visitors, so the button rendered as an empty blue block. Removed at David's
   request; to bring it back, drop this rule and enqueue dashicons. */
.mp_wrapper button.mp-hide-pw {
  display: none;
}

/* With the toggle gone the wrapper no longer needs to reserve space for it. */
.mp_wrapper .mp-hide-pw {
  display: block;
  position: static;
}
.mp_wrapper .mp-hide-pw input {
  padding-right: 16px;
}

/* The required marker, and the one-time legend that explains it. */
.mp_wrapper .gp-req {
  color: #C0392B;
  font-weight: 600;
  margin-left: 1px;
}
.mp_wrapper .gp-req-legend {
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--e-global-color-gpgrey);
  margin: 0 0 26px; font-weight: 600;
}

/* ============================================================
   Sign-in page card (page 78), 24 September 2026
   The login form sits inside a bordered card built in Elementor
   (.gp-signin-card), so the plugin form fills the card and the
   remember-me row, the password toggle and the actions are
   laid out to match the registration form.
   ============================================================ */
.gp-signin-card .mepr-form,
.gp-signin-card .mepr-login-form-wrap { max-width: none; margin: 0; }
.gp-signin-card .mp-form-label label {
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--e-global-color-gpsteel); margin-bottom: 8px; font-weight: 600;
}
.gp-signin-card .mp-hide-pw { position: relative; }
.gp-signin-card .mp-hide-pw input[type=password],
.gp-signin-card .mp-hide-pw input[type=text] { padding-right: 52px; }
.gp-signin-card .mp-hide-pw .button.mp-hide-pw {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; box-shadow: none; padding: 8px;
  color: var(--e-global-color-gpsteel); cursor: pointer; line-height: 1;
}
.gp-signin-card .mepr-form > div > label {
  display: flex; align-items: center; gap: 10px;
  font-family: Archivo, Helvetica, Arial, sans-serif; font-size: 14px;
  letter-spacing: 0; text-transform: none; color: var(--e-global-color-gpsteel);
  margin: 0;
}
.gp-signin-card .mepr-form input[type=checkbox] {
  width: 16px; height: 16px; margin: 0; accent-color: var(--e-global-color-gpsignal);
}
.gp-signin-card .mp-spacer { display: none; }
.gp-signin-card .submit { margin-top: 20px; }
.gp-signin-card input[type=submit] { width: 100%; }
.gp-signin-card .mepr-login-actions {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--e-global-color-gprule);
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}
.gp-signin-card .mepr-login-actions a {
  color: var(--e-global-color-gpsteel); text-decoration: none;
  border-bottom: 1px solid var(--e-global-color-gprule); padding-bottom: 3px;
}
.gp-signin-card .mepr-login-actions a:hover {
  color: var(--e-global-color-gpsignal); border-bottom-color: var(--e-global-color-gpsignal);
}
.gp-signin-card .mepr_error, .gp-signin-card .mepr-login-error {
  font-family: Archivo, Helvetica, Arial, sans-serif; font-size: 14px;
  color: #A8342A; margin-bottom: 16px;
}

/* The required-field legend belongs to the registration form; the sign-in card has no required markers. */
.gp-signin-card .gp-req-legend { display: none; }

/* ---- Forgot-password and reset steps inside the card ---- */
/* The plugin's own h3 duplicates the card label; the label carries the step. */
.gp-signin-card .mp_wrapper > h3,
.gp-signin-card .mepr_password_reset_requested > h3 { display: none; }
.gp-signin-card .mp_wrapper > p,
.gp-signin-card .mepr_password_reset_requested p {
  font-family: Archivo, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.55;
  color: var(--e-global-color-gpsteel); margin: 0 0 12px;
}
.gp-signin-card .mp_wrapper > p a,
.gp-signin-card .mepr_password_reset_requested a { color: var(--e-global-color-gpsignal); }
.gp-signin-card .mepr_forgot_password_input label,
.gp-signin-card .mepr_reset_password_input label {
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--e-global-color-gpsteel);
  display: block; margin-bottom: 8px; font-weight: 600;
}
.gp-signin-card .mp-form-row { margin-bottom: 20px; }
.gp-signin-card .mepr_error ul, .gp-signin-card ul.mepr_error { margin: 0 0 16px; padding-left: 18px; }

/* ============================================================
   Account page card (page 77), 24 September 2026
   The MemberPress account form sits inside a bordered card built
   in Elementor (.gp-account-card): the tabs become a real nav, the
   plugin's welcome line and required legend go, Payments is hidden
   (nothing is ever paid for), and the course list draws its
   progress as a rule with the figure beside it.
   ============================================================ */
.gp-account-card .mepr_account_page,
.gp-account-card .mp_wrapper { max-width: none; margin: 0; }

/* tabs */
.gp-account-card #mepr-account-nav ul {
  display: flex; flex-wrap: wrap; gap: 0 22px;
  list-style: none; margin: 0 0 28px; padding: 0;
  border-bottom: 1px solid var(--e-global-color-gprule);
}
.gp-account-card #mepr-account-nav li.mepr-nav-item { margin: 0; padding: 0; }
.gp-account-card #mepr-account-nav a {
  display: inline-block; padding: 0 0 12px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--e-global-color-gpsteel); text-decoration: none; font-weight: 600;
}
.gp-account-card #mepr-account-nav a:hover,
.gp-account-card #mepr-account-nav .mepr-active-nav-tab a {
  color: var(--e-global-color-gpsignal); border-bottom-color: var(--e-global-color-gpsignal);
}
.gp-account-card #mepr-account-nav li:has(#mepr-account-payments) { display: none; }

/* the plugin's welcome line and the registration legend do not belong here */
.gp-account-card #mepr-account-welcome-message,
.gp-account-card .gp-req-legend { display: none; }

/* profile form */
.gp-account-card .mp-form-row { margin-bottom: 20px; }
.gp-account-card .mp-form-label label {
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--e-global-color-gpsteel); margin-bottom: 8px; font-weight: 600;
}
.gp-account-card .mepr-account-form .submit,
.gp-account-card .mepr-account-form .mp-form-submit { margin-top: 8px; }
.gp-account-card a {
  color: var(--e-global-color-gpsignal);
}

/* course list: a rule for the bar, the figure beside it */
.gp-account-card .mpcs-course-list .grid {
  display: flex; align-items: center; gap: 24px;
  padding: 16px 0; margin: 0; min-width: 0; max-width: none;
  border-bottom: 1px solid var(--e-global-color-gprule);
}
.gp-account-card .mpcs-course-list .grid .col-1-2 { width: auto; float: none; padding: 0; margin: 0; }
.gp-account-card .mpcs-course-list .grid .col-1-2:first-child {
  flex: 1 1 auto; font-family: Archivo, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.4;
}
.gp-account-card .mpcs-course-list .grid .col-1-2:first-child a { color: var(--e-global-color-gpgraph); text-decoration: none; }
.gp-account-card .mpcs-course-list .grid .col-1-2:first-child a:hover { color: var(--e-global-color-gpsignal); }
.gp-account-card .mpcs-course-list .grid .col-1-2:last-child { flex: 0 0 160px; }
.gp-account-card .mpcs-course-list .course-progress {
  position: relative; height: 6px; margin: 0; padding: 0;
  background: var(--e-global-color-gprule); border-radius: 0; box-shadow: none; overflow: visible;
}
.gp-account-card .mpcs-course-list .user-progress {
  display: block; height: 6px; margin: 0; padding: 0;
  background: var(--e-global-color-gpsignal); border-radius: 0;
  font-size: 0; line-height: 0; color: transparent;
}
.gp-account-card .mpcs-course-list .user-progress::after {
  content: attr(data-value) "%";
  position: absolute; right: 0; top: -22px;
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px; letter-spacing: .06em; line-height: 1;
  color: var(--e-global-color-gpsteel); font-weight: 600;
}
.gp-account-card .mpcs-course-list .navigation { margin-top: 16px; font-size: 13px; }
@media (max-width: 480px) {
  .gp-account-card .mpcs-course-list .grid { gap: 16px; }
  .gp-account-card .mpcs-course-list .grid .col-1-2:last-child { flex-basis: 96px; }
}

/* enrollment and payment tables */
.gp-account-card .mepr-account-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gp-account-card .mepr-account-table th {
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--e-global-color-gpgrey); text-align: left;
  padding: 0 12px 10px 0; border-bottom: 1px solid var(--e-global-color-gprule);
}
.gp-account-card .mepr-account-table td {
  padding: 12px 12px 12px 0; vertical-align: top;
  color: var(--e-global-color-gpsteel); border-bottom: 1px solid var(--e-global-color-gprule);
}
.gp-account-card .mepr-account-table tr:nth-child(even) td { background: transparent; }
.gp-account-card .mp_wrapper > p,
.gp-account-card .mepr_account_page > p {
  font-family: Archivo, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.55;
  color: var(--e-global-color-gpsteel);
}


/* ---- Invalid fields, 25 September 2026 (gp-invalid-field) ----
   MemberPress paints a failed field solid red with a 2px red border. The
   message beside the label already says what is wrong, so the field keeps
   its white ground and takes only a red hairline. ---- */
.mepr-form input.invalid,
.mepr-form select.invalid,
.mepr-form textarea.invalid,
.mp_wrapper input.invalid,
.mp_wrapper select.invalid,
.mp_wrapper textarea.invalid {
  background-color: var(--e-global-color-gpwhite, #FFFFFF) !important;
  border: 1px solid #B4231F !important;
  box-shadow: none !important;
  color: var(--e-global-color-gpgraph, #14171A);
}
.mepr-form label.mepr-checkbox-field.invalid,
.mepr-form div.mepr-checkboxes-field.invalid,
.mepr-form div.mepr-radios-field.invalid {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: inset 3px 0 0 #B4231F;
  padding-left: 10px;
}
.mp_wrapper .cc-error,
.mepr-form .cc-error {
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #B4231F;
  margin-left: 10px;
}