/* ============================================================================
   FRAMED MINDS — PMPro Restyle (Levels + Checkout + Login + Account)
   ----------------------------------------------------------------------------
   v1.2 — Fixes:
     [A] HALF-PAGE BUG: the levels-grid sizing (flex basis + max-width:440px)
         was applied to .pmpro_card on EVERY PMPro page, squeezing the
         checkout and login cards to 440px. Grid sizing is now scoped to
         .pmpro_levels-div ONLY. All other PMPro pages get full-width cards
         capped at a readable 820px, centered.
     [B] PASSWORD-TOGGLE BUG: PMPro's "Show Password" toggle is a
         .pmpro_btn.pmpro_btn-plain.pmpro_btn-password-toggle button. The
         generic pill-button rule was inflating it into a large sage pill
         that collided with the "Confirm Password" label. Plain/toggle
         buttons are now excluded from pill styling and restyled as quiet
         inline text buttons.
     [C] Checkout two-column field rows (.pmpro_cols-2) collapse to one
         column on mobile so password/email pairs never cramp.
   Scope   : All PMPro pages (levels, checkout, login, account, billing).
   Tokens  : Uses your :root --fm-* vars, with hardcoded fallbacks.
   Install : Same file/handle as before — re-upload, bump $v, purge caches
             (OPcache + LiteSpeed + Cloudflare).
   ============================================================================ */

/* ---- 0. THE CARD (outer wrapper only) ------------------------------------ */
/* Cosmetics are GLOBAL — every PMPro card gets the FM treatment.              */
.pmpro .pmpro_card,
.pmpro_levels-div .pmpro_card {
  border: 1px solid var(--fm-border, #E7EAED) !important;
  border-radius: var(--fm-radius, 12px) !important;
  background: var(--fm-bg-white, #FFFFFF) !important;
  box-shadow: var(--fm-shadow-soft, 0 2px 12px rgba(58, 90, 64, 0.08)) !important;
  padding: 40px 36px 32px !important;
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto !important;        /* kill any inherited height */
  max-height: none !important;    /* never clip */
  overflow: visible !important;   /* never clip */
  transition: var(--fm-transition, all 0.3s ease);
}

/* Thin sage accent line at the top — rounded to match the card corners so we */
/* don't need overflow:hidden to clip it.                                      */
.pmpro .pmpro_card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--fm-cta-green, #BCCF97);
  border-radius: var(--fm-radius, 12px) var(--fm-radius, 12px) 0 0;
  opacity: 0.9;
}

.pmpro .pmpro_card:hover {
  box-shadow: var(--fm-shadow-hover, 0 4px 20px rgba(58, 90, 64, 0.14)) !important;
  transform: translateY(-3px);
}

/* v1.2 [A]: SIZING for stacked pages (checkout, login, account, billing).    */
/* Full width up to a readable cap, centered, with breathing room between     */
/* stacked cards. The levels page overrides this in section 2.                */
.pmpro .pmpro_card {
  width: 100%;
  max-width: 820px !important;
  margin: 0 auto 28px !important;
}

/* Checkout/login/account cards shouldn't lift on hover — they're forms, not  */
/* choices. Keep the lift for the levels grid only (re-enabled in section 2). */
.pmpro .pmpro_card:hover {
  transform: none;
}

/* ---- 1. RESET the inner wrappers ------------------------------------------ */
/* These sit INSIDE .pmpro_card. They must be flat: no border, no bg, no       */
/* shadow, no accent bar, no height basis, no clipping.                         */
.pmpro .pmpro_card .pmpro_card_content,
.pmpro .pmpro_card .pmpro_level,
.pmpro .pmpro_card > div {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  flex: 0 1 auto !important;      /* no fixed height basis on inner elements */
}
.pmpro .pmpro_card .pmpro_card_content::before,
.pmpro .pmpro_card .pmpro_level::before {
  content: none !important;       /* remove any duplicate accent bar */
}
/* Let the content column fill so the actions row can pin to the bottom */
.pmpro .pmpro_card .pmpro_card_content,
.pmpro .pmpro_card .pmpro_level {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* ---- 2. Levels page ONLY: side-by-side card grid -------------------------- */
/* v1.2 [A]: grid + narrow cards are scoped to .pmpro_levels-div so they can   */
/* never squeeze the checkout or login pages again.                            */
.pmpro_levels-div,
.pmpro_levels-div .pmpro_cols,
.pmpro_levels-div .pmpro_card_wrap {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;   /* equal-height cards */
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 0 24px;
}
.pmpro_levels-div .pmpro_card {
  flex: 1 1 340px;
  width: auto;
  max-width: 440px !important;
  margin: 0 !important;           /* grid gap handles spacing */
}
/* Levels cards are choices — restore the hover lift here only. */
.pmpro_levels-div .pmpro_card:hover {
  transform: translateY(-3px);
}

/* ---- 3. Page heading ("Membership Levels") -------------------------------- */
.pmpro_levels-div > h1:first-child,
.page-id-38 .entry-title,
.page-id-38 h1.page-title {
  font-family: "Avenir", "Work Sans", sans-serif;
  color: var(--fm-neutral, #151515);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.fm-levels-intro {
  font-family: "Work Sans", sans-serif;
  color: var(--fm-text-body, #4A5560);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}

/* ---- 4. Typography inside the card ---------------------------------------- */
.pmpro .pmpro_card {
  font-family: "Work Sans", sans-serif;
  color: var(--fm-text-body, #4A5560);
}

/* Card title (level name / Account Information / Select a Payment Plan) */
.pmpro .pmpro_card h2,
.pmpro .pmpro_card .pmpro_card_title {
  font-family: "Avenir", "Work Sans", sans-serif !important;
  color: var(--fm-neutral, #151515) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  line-height: 1.3 !important;
  margin: 6px 0 20px !important;
  letter-spacing: -0.01em;
}

/* Section labels (Purpose / Benefits / Access) */
.pmpro .pmpro_card h3 {
  font-family: "Avenir", "Work Sans", sans-serif;
  color: var(--fm-heal-teal, #3A5A40) !important;
  font-weight: 600;
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 26px 0 10px !important;
}

.pmpro .pmpro_card p {
  color: var(--fm-text-body, #4A5560);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 14px;
}

/* ---- 4b. Form fields (checkout / login / account) ------------------------- */
.pmpro .pmpro_form_label,
.pmpro label {
  font-family: "Avenir", "Work Sans", sans-serif;
  color: var(--fm-neutral, #151515);
  font-weight: 600;
  font-size: 0.9rem;
}
.pmpro .pmpro_form_input,
.pmpro .pmpro_card input[type="text"],
.pmpro .pmpro_card input[type="email"],
.pmpro .pmpro_card input[type="password"] {
  border: 1px solid var(--fm-border, #E7EAED);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: "Work Sans", sans-serif;
  font-size: 0.95rem;
  color: var(--fm-text-body, #4A5560);
  background: var(--fm-bg-white, #FFFFFF);
  transition: var(--fm-transition, all 0.3s ease);
}
.pmpro .pmpro_form_input:focus,
.pmpro .pmpro_card input[type="text"]:focus,
.pmpro .pmpro_card input[type="email"]:focus,
.pmpro .pmpro_card input[type="password"]:focus {
  border-color: var(--fm-cta-green, #BCCF97);
  box-shadow: 0 0 0 3px rgba(188, 207, 151, 0.25);
  outline: none;
}

/* v1.2 [C]: two-column field rows breathe, and collapse cleanly on mobile.   */
.pmpro .pmpro_cols-2 {
  gap: 16px 20px;
}

/* ---- 5. Pricing block + actions ------------------------------------------- */
.pmpro .pmpro_card .pmpro_card_actions {
  margin-top: auto !important;      /* pin to bottom for equal-height cards */
  padding-top: 22px !important;
  border-top: 1px solid var(--fm-border, #E7EAED) !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  flex: 0 0 auto !important;
}
.pmpro .pmpro_card .pmpro_card_actions p {
  font-family: "Work Sans", sans-serif;
  color: var(--fm-text-meta, #A0A7B0);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
  flex: 1 1 55%;
}
.pmpro .pmpro_card .pmpro_card_actions p strong {
  color: var(--fm-neutral, #151515);
  font-weight: 700;
  font-size: 1.05rem;
}

/* ---- 6. Buttons ------------------------------------------------------------ */
/* v1.2 [B]: pill styling now EXCLUDES plain/utility buttons (password toggle, */
/* discount-code reveal, etc.) so they stay quiet inline controls.             */
.pmpro .pmpro_card .pmpro_btn:not(.pmpro_btn-plain):not(.pmpro_btn-password-toggle),
.pmpro .pmpro_card a.pmpro_btn-select,
.pmpro .pmpro_btn-submit-checkout {
  background: var(--fm-cta-green, #BCCF97) !important;
  border: 1px solid var(--fm-cta-green, #BCCF97) !important;
  color: var(--fm-neutral, #151515) !important;
  font-family: "Avenir", "Work Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transition: var(--fm-transition, all 0.3s ease) !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
}
.pmpro .pmpro_card .pmpro_btn:not(.pmpro_btn-plain):not(.pmpro_btn-password-toggle):hover,
.pmpro .pmpro_card a.pmpro_btn-select:hover,
.pmpro .pmpro_btn-submit-checkout:hover {
  background: var(--fm-cta-hover, #9FAF80) !important;
  border-color: var(--fm-cta-hover, #9FAF80) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* v1.2 [B]: plain / password-toggle buttons — quiet inline text controls.    */
/* Beats the old pill rule and restores PMPro's compact toggle geometry.      */
.pmpro .pmpro_btn-plain,
.pmpro .pmpro_card .pmpro_btn-plain,
.pmpro .pmpro_btn-password-toggle,
.pmpro .pmpro_card .pmpro_btn-password-toggle,
.pmpro .pmpro_form_field-password-toggle button {
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: var(--fm-heal-teal, #3A5A40) !important;
  font-family: "Work Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  padding: 2px 6px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  transform: none !important;
  text-decoration: none !important;
  cursor: pointer;
}
.pmpro .pmpro_btn-plain:hover,
.pmpro .pmpro_btn-password-toggle:hover,
.pmpro .pmpro_form_field-password-toggle button:hover {
  background: rgba(188, 207, 151, 0.18) !important;
  color: var(--fm-heal-teal, #3A5A40) !important;
  transform: none !important;
}

/* Keep the toggle sitting neatly beside its label, not floating over it. */
.pmpro .pmpro_form_field-password-toggle {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle;
}

/* Current-level state = calm, non-actionable */
.pmpro .pmpro_card .pmpro_btn-disabled,
.pmpro .pmpro_card a.pmpro_btn.pmpro_btn-your-level {
  background: var(--fm-warm-neutral, #F4F1E8) !important;
  border: 1px solid var(--fm-border, #E7EAED) !important;
  color: var(--fm-heal-teal, #3A5A40) !important;
  cursor: default !important;
  pointer-events: none;
}

/* ---- 7. Recommended tier — Navigator (LEVELS PAGE ONLY) -------------------- */
/* v1.2 [A]: removed the .pmpro .pmpro_cols fallback selectors so the pill and */
/* teal accent can never leak onto the checkout page's last card.              */
/* Targeted by POSITION: Navigator is the 2nd / last card on the levels page.  */
/* If you ever reorder, change :nth-of-type(2) to match its position.          */
.pmpro_levels-div .pmpro_card:nth-of-type(2),
.pmpro_levels-div .pmpro_card:last-of-type {
  border-color: var(--fm-cta-green, #BCCF97) !important;
  box-shadow: var(--fm-shadow-hover, 0 4px 20px rgba(58, 90, 64, 0.14)) !important;
  padding-top: 58px !important;   /* headroom for the tag */
}

/* Stronger, darker top accent bar on Navigator */
.pmpro_levels-div .pmpro_card:nth-of-type(2)::before,
.pmpro_levels-div .pmpro_card:last-of-type::before {
  height: 5px;
  opacity: 1;
  background: var(--fm-heal-teal, #3A5A40);
}

/* Auto-inject the "Most chosen" pill — NO editor markup needed */
.pmpro_levels-div .pmpro_card:nth-of-type(2)::after,
.pmpro_levels-div .pmpro_card:last-of-type::after {
  content: "Most chosen";
  position: absolute;
  top: 20px;
  left: 36px;
  background: var(--fm-heal-teal, #3A5A40);
  color: #FFFFFF;
  font-family: "Avenir", "Work Sans", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  line-height: 1;
}

/* Optional manual tag — if you'd rather place "Most chosen" inline in the copy */
/* via <span class="fm-tier-tag">Most chosen</span>, this styles it. Harmless   */
/* to leave in even while the auto-injected pill above is active.               */
.fm-tier-tag {
  display: inline-block;
  background: var(--fm-heal-teal, #3A5A40);
  color: #FFFFFF;
  font-family: "Avenir", "Work Sans", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  align-self: flex-start;
}

/* ---- 8. "Return to Home / Your Account" link ------------------------------ */
.pmpro_levels-div a[href*="account"],
.pmpro_levels-div a[href*="home"],
.pmpro .pmpro_a-account {
  color: var(--fm-heal-teal, #3A5A40) !important;
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  text-decoration: none;
}
.pmpro_levels-div a[href*="account"]:hover,
.pmpro_levels-div a[href*="home"]:hover {
  color: var(--fm-accent-green, #96CA42) !important;
}

/* ---- 9. Responsive --------------------------------------------------------- */
@media (max-width: 782px) {
  /* Stacked pages: comfortable padding on small screens */
  .pmpro .pmpro_card {
    padding: 32px 24px 28px !important;
  }

  /* Levels grid collapses to single column */
  .pmpro_levels-div,
  .pmpro_levels-div .pmpro_cols,
  .pmpro_levels-div .pmpro_card_wrap { gap: 20px; padding: 4px 0 16px; }
  .pmpro_levels-div .pmpro_card {
    flex: 1 1 100%;
    max-width: 100% !important;
  }

  /* v1.2 [C]: two-column field rows (password / confirm, email / confirm)    */
  /* become one column so nothing cramps or misaligns.                        */
  .pmpro .pmpro_cols-2 {
    display: block !important;
  }
  .pmpro .pmpro_cols-2 > div {
    margin-bottom: 16px !important;
  }

  .pmpro .pmpro_card .pmpro_card_actions { flex-direction: column; align-items: flex-start; }
  .pmpro .pmpro_card .pmpro_card_actions .pmpro_btn { width: 100%; text-align: center; }
}