/* ──────────────────────────────────────────────────────────────────
   SRA checkout & login skin (CR-006) — carries the site's established
   card language into the MemberPress ReadyLaunch templates so the
   transaction pages read as the same product as the marketing site.
   Signature move: the order summary is styled as the same green-
   bordered plan card the visitor clicked on the pricing page.
   Tokens are lifted from the live site (navy #122041, green #5FA33D,
   borders #D7DBE4, 14px card radius, soft navy shadow, Avenir).
   ────────────────────────────────────────────────────────────────── */
:root {
  --sra-navy: #122041;
  --sra-ink: #31405f;
  --sra-muted: #6b7691;
  --sra-green: #5FA33D;
  --sra-green-hover: #4c8f2f;
  --sra-green-light: #80CA4D;
  --sra-green-tint: #eef6e8;
  --sra-border: #D7DBE4;
  --sra-bg: #F4F6F9;
  --sra-radius: 14px;
  --sra-shadow: 0 10px 30px rgba(18, 32, 65, 0.08);
}

body.mepr-pro-template {
  background: var(--sra-bg);
  font-family: "Avenir", "Avenir Next", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--sra-ink);
}

/* Header bar: quiet, white, bordered — matches the site header weight.
   !important needed: ReadyLaunch paints the header with the primary colour
   after our sheet loads. */
body.mepr-pro-template .site-header {
  background: #fff !important;
  border-bottom: 1px solid var(--sra-border) !important;
  box-shadow: none !important;
}

body.mepr-pro-template .site-header,
body.mepr-pro-template .site-header a,
body.mepr-pro-template .site-header .profile-menu {
  color: var(--sra-navy) !important;
}

body.mepr-pro-template .site-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 20px 72px;
}

/* Headings across both templates. */
body.mepr-pro-template h1,
body.mepr-pro-template h2,
body.mepr-pro-template h3,
body.mepr-pro-template .mp-form-label {
  font-family: "Avenir", "Avenir Next", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--sra-navy);
}

/* RL's pre-form message container: only exists for notices — never a card. */
body.mepr-pro-template .mepr-before-signup-form:empty {
  display: none;
}

/* ── Two cards, one container: summary = the plan card the visitor
      picked on the pricing page; form = the quiet white card. ─────── */
body.mepr-pro-template form.mepr-signup-form {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

body.mepr-pro-template .mepr-checkout-container {
  gap: 28px;
  align-items: flex-start;
}

body.mepr-pro-template .mepr-checkout-container .invoice-wrapper {
  background: #fff;
  border: 2px solid var(--sra-green-light);
  border-radius: var(--sra-radius);
  box-shadow: var(--sra-shadow);
  padding: 26px 28px;
}

body.mepr-pro-template .invoice-wrapper .invoice-heading {
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--sra-navy);
}

body.mepr-pro-template .invoice-wrapper .mepr-product-rows,
body.mepr-pro-template .invoice-wrapper .mepr_price {
  color: var(--sra-ink);
}

body.mepr-pro-template .invoice-wrapper td,
body.mepr-pro-template .invoice-wrapper th {
  border-color: var(--sra-border);
  padding: 10px 6px;
}

/* Coupon line reads as the good news it is. */
body.mepr-pro-template .invoice-wrapper a,
body.mepr-pro-template .invoice-wrapper .mepr-coupon-code {
  color: var(--sra-green);
  font-weight: 600;
  text-decoration: none;
}

body.mepr-pro-template .mepr-checkout-container .form-wrapper,
body.mepr-pro-template .mp_login_form {
  background: #fff;
  border: 1px solid var(--sra-border);
  border-radius: var(--sra-radius);
  box-shadow: var(--sra-shadow);
  padding: 30px 28px;
}

/* An unmounted Stripe payment element is just an empty div — no chrome. */
body.mepr-pro-template .mepr-stripe-card-element:empty {
  border: none;
  padding: 0;
}

/* Stack below tablet width; the order summary leads. */
@media (max-width: 900px) {
  body.mepr-pro-template .mepr-checkout-container {
    flex-direction: column;
  }

  body.mepr-pro-template .mepr-checkout-container .invoice-wrapper {
    order: -1;
    width: 100%;
  }

  body.mepr-pro-template .mepr-checkout-container .form-wrapper {
    width: 100%;
  }
}

body.mepr-pro-template .mp-form-label {
  font-weight: 600;
  font-size: 15px;
}

body.mepr-pro-template .mepr-form-input,
body.mepr-pro-template .mepr-select-field,
body.mepr-pro-template .mepr-form-textarea,
body.mepr-pro-template .mp_wrapper input[type="text"],
body.mepr-pro-template .mp_wrapper input[type="email"],
body.mepr-pro-template .mp_wrapper input[type="password"],
body.mepr-pro-template .mp_wrapper input[type="tel"] {
  border: 1px solid var(--sra-border);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 15px;
  color: var(--sra-navy);
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

body.mepr-pro-template .mepr-form-input:focus,
body.mepr-pro-template .mepr-select-field:focus,
body.mepr-pro-template .mepr-form-textarea:focus,
body.mepr-pro-template .mp_wrapper input:focus {
  border-color: var(--sra-green);
  box-shadow: 0 0 0 3px rgba(95, 163, 61, 0.18);
  outline: none;
}

/* Keyboard focus stays visible on non-field controls. */
body.mepr-pro-template a:focus-visible,
body.mepr-pro-template button:focus-visible,
body.mepr-pro-template input[type="submit"]:focus-visible {
  outline: 3px solid rgba(95, 163, 61, 0.55);
  outline-offset: 2px;
}

/* ── Payment methods ──────────────────────────────────────────────
   ReadyLaunch's own radio cards handle selection; the .mepr-payment-method
   wrappers under them are gateway DESCRIPTION holders — no chrome of their
   own, and fully hidden while their content carries .mepr-hidden. */
body.mepr-pro-template .mepr-payment-method {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* NOTE: do NOT hide wrappers based on .mepr-hidden — ReadyLaunch toggles the
   description's visibility with inline styles and leaves the class in place,
   so the class is not a reliable signal. A chrome-less wrapper collapses to
   nothing on its own when its description is hidden. */

body.mepr-pro-template .mepr-payment-option-label,
body.mepr-pro-template .mepr-payment-method-label-text {
  font-weight: 600;
  color: var(--sra-navy);
}

body.mepr-pro-template .mepr-stripe-card-element {
  border: 1px solid var(--sra-border);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

body.mepr-pro-template .mepr-stripe-card-errors {
  color: #a8264a;
  font-weight: 600;
}

/* ── Submit ───────────────────────────────────────────────────────── */
body.mepr-pro-template .mepr-submit,
body.mepr-pro-template input[type="submit"].mepr-submit,
body.mepr-pro-template .mp_login_form input[type="submit"] {
  background: var(--sra-green);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 28px;
  width: 100%;
  cursor: pointer;
  transition: background-color 120ms ease;
}

body.mepr-pro-template .mepr-submit:hover,
body.mepr-pro-template .mp_login_form input[type="submit"]:hover {
  background: var(--sra-green-hover);
}

/* TOS row breathing space; link in site green. */
body.mepr-pro-template .mepr_tos {
  margin: 18px 0;
}

body.mepr-pro-template .mepr_tos a {
  color: var(--sra-green);
  font-weight: 600;
}

/* Footer widgets area under RL pages: mute it. */
body.mepr-pro-template .mepr-rl-footer-widgets {
  color: var(--sra-muted);
}

/* ── Login page (WP page 4189 — an Elementor page, NOT ReadyLaunch,
      so the body.mepr-pro-template scope never applies there) ──────── */
body.page-id-4189,
body.elementor-page-4189 {
  background: var(--sra-bg) !important;
  font-family: "Avenir", "Avenir Next", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body.page-id-4189 .elementor-section,
body.page-id-4189 .e-con,
body.elementor-page-4189 .elementor-section,
body.elementor-page-4189 .e-con {
  background-color: transparent !important;
  background-image: none !important;
}

body.page-id-4189 .mp_login_form {
  background: #fff;
  border: 1px solid var(--sra-border);
  border-radius: var(--sra-radius);
  box-shadow: var(--sra-shadow);
  padding: 34px 32px;
  max-width: 460px;
  margin: 40px auto 64px;
}

body.page-id-4189 .mp_login_form h1,
body.page-id-4189 .mp_login_form h2,
body.page-id-4189 .mp_login_form h3 {
  color: var(--sra-navy);
  font-weight: 800;
}

body.page-id-4189 .mp_login_form input[type="text"],
body.page-id-4189 .mp_login_form input[type="password"] {
  border: 1px solid var(--sra-border);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 15px;
  color: var(--sra-navy);
  width: 100%;
  box-sizing: border-box;
}

body.page-id-4189 .mp_login_form input[type="text"]:focus,
body.page-id-4189 .mp_login_form input[type="password"]:focus {
  border-color: var(--sra-green);
  box-shadow: 0 0 0 3px rgba(95, 163, 61, 0.18);
  outline: none;
}

body.page-id-4189 .mp_login_form input[type="submit"],
body.page-id-4189 .mp_login_form .button-primary {
  background: var(--sra-green) !important;
  border: none !important;
  border-radius: 10px;
  color: #fff !important;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 28px;
  width: 100%;
  cursor: pointer;
  transition: background-color 120ms ease;
}

body.page-id-4189 .mp_login_form input[type="submit"]:hover,
body.page-id-4189 .mp_login_form .button-primary:hover {
  background: var(--sra-green-hover) !important;
}

body.page-id-4189 .mp_login_form a {
  color: var(--sra-green);
  font-weight: 600;
}

/* ── Account area (page 4188 — ReadyLaunch "shell": green header +
      green sidebar by default; body has no mepr-pro-template class).
      Sidebar goes navy to match the sra-dashboard app bar the member
      sees on the other side of the platform. ───────────────────────── */
body.page-id-4188 {
  font-family: "Avenir", "Avenir Next", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body.page-id-4188 .site-header,
body.page-id-4188 .site-header.account-header {
  background: #fff !important;
  border-bottom: 1px solid var(--sra-border) !important;
  box-shadow: none !important;
}

body.page-id-4188 .site-header,
body.page-id-4188 .site-header a,
body.page-id-4188 .site-header .profile-menu {
  color: var(--sra-navy) !important;
}

body.page-id-4188 #mepr-account-nav,
body.page-id-4188 nav.mepr-nav.mepr-rl-shell__menu,
body.page-id-4188 .mepr-account-container nav.mepr-nav,
body.page-id-4188 .mepr-nav.mepr-rl-shell__menu ul {
  background: #122041 !important;
  background-color: #122041 !important;
  background-image: none !important;
}

body.page-id-4188 .mepr-nav .mepr-nav-item a {
  color: #e7ecf5 !important;
  font-weight: 500;
}

body.page-id-4188 .mepr-nav .mepr-nav-item a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06);
}

body.page-id-4188 .mepr-nav .mepr-active-nav-tab {
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--sra-green-light);
}

body.page-id-4188 .mepr-nav .mepr-active-nav-tab a {
  color: #fff !important;
  font-weight: 700;
}

/* Account content: buttons and links in the site's green. */
body.page-id-4188 .site-main input[type="submit"],
body.page-id-4188 .site-main .button-primary,
body.page-id-4188 .site-main button[type="submit"] {
  background: var(--sra-green) !important;
  border: none !important;
  border-radius: 10px;
  color: #fff !important;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms ease;
}

body.page-id-4188 .site-main input[type="submit"]:hover,
body.page-id-4188 .site-main .button-primary:hover {
  background: var(--sra-green-hover) !important;
}

body.page-id-4188 .site-main a:not(.button-primary):not(.mepr-account-row-action) {
  color: var(--sra-green);
}

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.mepr-pro-template .site-main {
    padding: 20px 14px 48px;
  }

  body.mepr-pro-template .mepr-before-signup-form,
  body.mepr-pro-template form.mepr-signup-form,
  body.mepr-pro-template .mp_login_form {
    padding: 20px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mepr-pro-template * {
    transition: none !important;
  }
}

/* Final Amendments v2 (25 Aug 2026): more air between the order summary text
   and the green card border. */
body.mepr-pro-template .mepr-checkout-container .invoice-wrapper { padding: 32px 34px !important; }
body.mepr-pro-template .invoice-wrapper .invoice-heading { margin: 0 0 10px !important; }

/* V5 p48: login page on phones — the logo filled the full width and ran off
   the edge, and the form sat in a card inside a second card ("stretched").
   Logo sized with breathing room; the outer ReadyLaunch box drops its frame. */
@media (max-width: 640px) {
  body.mepr-guest-layout .site-logo,
  body.mepr-guest-layout img.site-logo {
    width: auto !important;
    max-width: 230px !important;
    height: auto !important;
    margin: 18px auto !important;
    display: block !important;
  }
  body.mepr-guest-layout .mepro-boxed {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.mepr-guest-layout .mepro-login-contents { padding: 0 !important; }
  body.mepr-guest-layout .mp_login_form { padding: 24px 20px !important; }
}