/* ============================================================
   FRAMED MINDS — Paid Memberships Pro + Nextend Social Login
   
   Requires: fm-tokens.css (brand variables)
   
   Covers:
     1. PMPro CSS variable overrides (theme-level)
     2. Membership Levels page (default table)
    2b. Advanced Levels page (card layout + gradient)
     3. Checkout page
     4. Confirmation page
     5. Login / Account pages
     6. Billing & Cancel pages
     7. Content restriction messages
     8. Nextend Social Login — button restyle
     9. Nextend Social Login — layout integration
    10. Responsive
   
   Plugin versions:
     - Paid Memberships Pro 3.x
     - PMPro Advanced Levels Page Add On
     - Nextend Social Login (Free + Pro)
     - PMPro Social Login Add On 1.1
   
   Last updated: April 4, 2026
   ============================================================ */


/* ==========================================================
   1. PMPro CSS VARIABLE OVERRIDES
   
   PMPro uses its own CSS custom properties. We override them
   at the .pmpro scope so every PMPro element inherits FM
   brand values without fighting specificity.
   ========================================================== */

.pmpro {
  --pmpro--color--accent: #BCCF97;
  --pmpro--color--accent--variation: #9FAF80;
  --pmpro--color--base: #FFFFFF;
  --pmpro--color--base--variation: #F4F1E8;
  --pmpro--color--contrast: #151515;
  --pmpro--color--contrast--variation: #4A5560;
  --pmpro--color--border: #E7EAED;
  --pmpro--color--border--variation: #E7EAED;
  --pmpro--color--success-background: #f0f7df;
  --pmpro--color--success-border: #BCCF97;
  --pmpro--color--success-text: #3A5A40;
  --pmpro--color--error-background: #fdf2f2;
  --pmpro--color--error-border: #EB5757;
  --pmpro--color--error-text: #c0392b;
  --pmpro--color--error-link: #a93226;
  --pmpro--color--alert-background: #fdf6ec;
  --pmpro--color--alert-border: #F2994A;
  --pmpro--color--alert-text: #8a5a00;
  --pmpro--base--border-radius: 12px;
  --pmpro--base--spacing--small: 12px;
  --pmpro--base--spacing--medium: 20px;
  --pmpro--base--spacing--large: 28px;
  --pmpro--box-shadow: 0 8px 24px rgba(21, 21, 21, 0.05);

  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  color: #151515;
}


/* ==========================================================
   2. MEMBERSHIP LEVELS PAGE
   
   Transforms the default PMPro table into warm, branded
   cards with generous spacing and clear visual hierarchy.
   ========================================================== */

/* --- Page Background Gradient --- */
.pmpro_advanced_levels_wrapper,
body.pmpro-membership-levels .site-main,
body.pmpro-membership-levels .entry-content,
body[class*="membership-levels"] .site-main {
  background: linear-gradient(175deg, #E9E2D0 0%, #f4f1e8 38%, #FFFFFF 100%);
  padding-bottom: 60px;
}

/* --- Page Title --- */
.pmpro h1,
.page-template-default .entry-title,
.pmpro_levels_table + .pmpro_actions_nav h1 {
  font-family: var(--fm-font-heading, 'Avenir', 'Nunito Sans', -apple-system, sans-serif);
  font-weight: 700;
  color: #151515;
}

/* --- Level Group Cards --- */
.pmpro .pmpro_level_group {
  background: #FFFFFF;
  border: 1px solid #E7EAED;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(21, 21, 21, 0.04);
  margin-bottom: 24px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.pmpro .pmpro_level_group:hover {
  box-shadow: 0 14px 40px rgba(21, 21, 21, 0.07);
}

/* --- Group Titles --- */
.pmpro .pmpro_level_group .pmpro_card_title {
  font-family: var(--fm-font-heading, 'Avenir', 'Nunito Sans', -apple-system, sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: #151515;
  padding: 28px 32px 0;
}

.pmpro .pmpro_level_group .pmpro_card_content {
  padding: 12px 32px 32px;
}

/* --- Helper text under group title --- */
.pmpro .pmpro_level_group .pmpro_card_content > p {
  font-size: 14.5px;
  color: #4A5560;
  margin: 4px 0 0;
  line-height: 1.55;
}

/* --- Levels Table --- */
.pmpro .pmpro_levels_table {
  border-collapse: separate;
  border-spacing: 0;
}

.pmpro .pmpro_levels_table thead th {
  font-family: var(--fm-font-heading, 'Avenir', 'Nunito Sans', -apple-system, sans-serif);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #A0A7B0;
  padding: 12px 16px;
  border: none;
  background: transparent;
}

/* --- Level Rows --- */
.pmpro .pmpro_levels_table tbody th,
.pmpro .pmpro_levels_table tbody td {
  padding: 20px 16px;
  border-top: 1px solid #F4F1E8;
  vertical-align: middle;
  background: transparent;
}

.pmpro .pmpro_levels_table tbody tr:first-child th,
.pmpro .pmpro_levels_table tbody tr:first-child td {
  border-top-color: #E7EAED;
}

/* --- Level Name --- */
.pmpro .pmpro_levels_table tbody th[data-title="Level"] {
  font-family: var(--fm-font-heading, 'Avenir', 'Nunito Sans', -apple-system, sans-serif);
  font-size: 17px;
  font-weight: 600;
  color: #151515;
}

/* --- Price --- */
.pmpro .pmpro_level-price {
  font-size: 16px;
  font-weight: 600;
  color: #3A5A40;
  margin: 0;
}

.pmpro .pmpro_level-expiration {
  font-size: 13.5px;
  color: #A0A7B0;
  margin: 4px 0 0;
}

/* --- Select / Action Buttons --- */
.pmpro .pmpro_levels_table .pmpro_btn-select {
  background: #BCCF97;
  border: 1px solid #BCCF97;
  color: #151515;
  border-radius: 999px;
  padding: 10px 28px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  letter-spacing: 0.01em;
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
  box-shadow: 0 2px 8px rgba(188, 207, 151, 0.25);
  text-align: center;
  display: inline-block;
  min-width: 120px;
}

.pmpro .pmpro_levels_table .pmpro_btn-select:hover,
.pmpro .pmpro_levels_table .pmpro_btn-select:focus {
  background: #9FAF80;
  border-color: #9FAF80;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(159, 175, 128, 0.35);
}

/* --- Current Level Button --- */
.pmpro .pmpro_level-current .pmpro_btn-outline {
  background: transparent;
  border: 1px solid #3A5A40;
  color: #3A5A40;
  border-radius: 999px;
  padding: 10px 28px;
  font-size: 15px;
  font-weight: 600;
  min-width: 120px;
}

.pmpro .pmpro_level-current .pmpro_btn-outline:hover,
.pmpro .pmpro_level-current .pmpro_btn-outline:focus {
  background: #3A5A40;
  color: #FFFFFF;
}

/* --- Current Level Row Highlight --- */
.pmpro .pmpro_level-current th,
.pmpro .pmpro_level-current td {
  background: #f9fdf3;
}

.pmpro .pmpro_level-current th[data-title="Level"]::after {
  content: "Your current plan";
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #3A5A40;
  margin-top: 4px;
  letter-spacing: 0.02em;
}


/* ==========================================================
   2b. ADVANCED LEVELS PAGE (Card Layout)
   
   PMPro Advanced Levels Page Add On markup:
     #pmpro_levels.pmpro_advanced_levels-div.pmpro_levels-list
       └ .pmpro_level
           └ .pmpro_card
               ├ .pmpro_card_content  (h2, h3, p)
               └ .pmpro_card_actions  (price + button)
   ========================================================== */

/* --- Card Grid Layout --- */
#pmpro_levels.pmpro_advanced_levels-div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 960px;
  margin: 0 auto;
}

/* --- Individual Level Cards --- */
#pmpro_levels .pmpro_level {
  background: #FFFFFF;
  border: 1px solid #E7EAED;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(21, 21, 21, 0.04);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#pmpro_levels .pmpro_level:hover {
  box-shadow: 0 14px 44px rgba(21, 21, 21, 0.08);
  transform: translateY(-3px);
}

/* --- Inner Card — flex column so actions pin to bottom --- */
#pmpro_levels .pmpro_level > .pmpro_card {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* --- Card Content Area --- */
#pmpro_levels .pmpro_level .pmpro_card_content {
  padding: 36px 32px 20px;
  flex: 1;
}

/* --- Level Name / Title --- */
#pmpro_levels .pmpro_level .pmpro_card_content h2 {
  font-family: var(--fm-font-heading, 'Avenir', 'Nunito Sans', -apple-system, sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: #151515;
  margin: 0 0 20px;
  line-height: 1.3;
}

/* --- Section Headings (Purpose, Benefits, Access) --- */
#pmpro_levels .pmpro_level .pmpro_card_content h3 {
  font-family: var(--fm-font-heading, 'Avenir', 'Nunito Sans', -apple-system, sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: #3A5A40;
  margin: 20px 0 8px;
  letter-spacing: 0.01em;
}

#pmpro_levels .pmpro_level .pmpro_card_content h3:first-of-type {
  margin-top: 0;
}

/* --- Body Copy --- */
#pmpro_levels .pmpro_level .pmpro_card_content p {
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  font-size: 14.5px;
  color: #4A5560;
  line-height: 1.7;
  margin: 0 0 12px;
}

/* --- Price / Action Bar (bottom) --- */
#pmpro_levels .pmpro_level .pmpro_card_actions {
  background: #faf9f5;
  border-top: 1px solid #F4F1E8;
  padding: 18px 32px;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 0 0 20px 20px;
}

#pmpro_levels .pmpro_level .pmpro_card_actions .pmpro_level-price {
  padding: 0;
  margin: 0;
}

#pmpro_levels .pmpro_level .pmpro_card_actions .pmpro_level-price p {
  font-size: 15px;
  color: #3A5A40;
  font-weight: 600;
  margin: 0;
}

#pmpro_levels .pmpro_level .pmpro_card_actions .pmpro_level-expiration {
  font-size: 0;
  line-height: 0;
  color: transparent;
  display: block;
  margin-top: 4px;
}

#pmpro_levels .pmpro_level .pmpro_card_actions .pmpro_level-expiration::after {
  content: "Membership can be canceled anytime.";
  font-size: 12.5px;
  line-height: 1.4;
  color: #A0A7B0;
  font-weight: 400;
  display: block;
}

/* --- Select Button inside Action Bar --- */
#pmpro_levels .pmpro_level .pmpro_card_actions .pmpro_btn {
  background: #BCCF97;
  border: 1px solid #BCCF97;
  color: #151515;
  border-radius: 999px;
  padding: 10px 28px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
  box-shadow: 0 2px 8px rgba(188, 207, 151, 0.25);
  white-space: nowrap;
  min-width: 120px;
  text-align: center;
  flex-shrink: 0;
}

#pmpro_levels .pmpro_level .pmpro_card_actions .pmpro_btn:hover {
  background: #9FAF80;
  border-color: #9FAF80;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(159, 175, 128, 0.35);
}

/* --- Navigator Card — Visual Emphasis (highlighted / current) --- */
#pmpro_levels .pmpro_level.pmpro_level-highlight,
#pmpro_levels .pmpro_level-current {
  border-color: #3A5A40;
  border-width: 2px;
  background: linear-gradient(180deg, #FFFFFF 0%, #fafdf5 100%);
}

#pmpro_levels .pmpro_level.pmpro_level-highlight::before,
#pmpro_levels .pmpro_level-current::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3A5A40, #BCCF97);
  border-radius: 20px 20px 0 0;
  z-index: 1;
}

/* --- Current / Highlighted Level Action Bar --- */
#pmpro_levels .pmpro_level.pmpro_level-highlight .pmpro_card_actions,
#pmpro_levels .pmpro_level-current .pmpro_card_actions {
  background: #f0f7df;
  border-color: #d4e4b0;
}

/* --- Current / Highlighted Level Button --- */
#pmpro_levels .pmpro_level.pmpro_level-highlight .pmpro_card_actions .pmpro_btn,
#pmpro_levels .pmpro_level-current .pmpro_card_actions .pmpro_btn {
  background: #3A5A40;
  border-color: #3A5A40;
  color: #FFFFFF;
  box-shadow: 0 2px 10px rgba(58, 90, 64, 0.2);
}

#pmpro_levels .pmpro_level.pmpro_level-highlight .pmpro_card_actions .pmpro_btn:hover,
#pmpro_levels .pmpro_level-current .pmpro_card_actions .pmpro_btn:hover {
  background: #2d4833;
  border-color: #2d4833;
  box-shadow: 0 4px 16px rgba(58, 90, 64, 0.3);
}

/* --- Return to Account link --- */
.pmpro_actions_nav {
  text-align: center;
  margin-top: 32px;
}

.pmpro_actions_nav a {
  color: #3A5A40;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.pmpro_actions_nav a:hover {
  color: #151515;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================
   3. CHECKOUT PAGE
   
   Form fields, payment cards, account info, and submit
   buttons — all styled for warmth and clarity.
   ========================================================== */

/* --- Checkout Cards --- */
.pmpro .pmpro_card {
  border-radius: 16px;
  border-color: #E7EAED;
  box-shadow: 0 8px 24px rgba(21, 21, 21, 0.04);
}

.pmpro .pmpro_card_title {
  font-family: var(--fm-font-heading, 'Avenir', 'Nunito Sans', -apple-system, sans-serif);
  font-size: 20px;
  font-weight: 700;
  color: #151515;
}

/* --- Form Labels --- */
.pmpro .pmpro_form_label {
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  font-size: 14.5px;
  font-weight: 500;
  color: #151515;
}

/* --- Form Inputs --- */
.pmpro .pmpro_form_input {
  background: #F4F1E8;
  border: 1px solid #E7EAED;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  color: #151515;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pmpro .pmpro_form_input:focus {
  background: #FFFFFF;
  border-color: #BCCF97;
  box-shadow: 0 0 0 3px rgba(188, 207, 151, 0.25);
  outline: none;
}

/* Select dropdown */
.pmpro .pmpro_form_input-select {
  background-color: #F4F1E8;
}

.pmpro .pmpro_form_input-select:focus {
  background-color: #FFFFFF;
}

/* --- Form Hints --- */
.pmpro .pmpro_form_hint {
  color: #A0A7B0;
  font-size: 13px;
}

/* --- Level Cost Text (Checkout) --- */
.pmpro .pmpro_level_cost_text {
  font-size: 16px;
  color: #3A5A40;
  font-weight: 500;
  line-height: 1.6;
}

.pmpro .pmpro_level_cost_text strong {
  color: #151515;
}

/* --- Discount Code Area --- */
.pmpro .pmpro_card_actions {
  background-color: #faf9f5;
  border-color: #F4F1E8;
  padding: 16px 32px;
}

.pmpro .pmpro_card_actions button,
.pmpro #other_discount_code_toggle {
  color: #3A5A40;
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pmpro .pmpro_card_actions button:hover,
.pmpro #other_discount_code_toggle:hover {
  color: #151515;
}

/* --- Discount Code Tag --- */
.pmpro .pmpro_tag-discount-code {
  background: #f0f7df;
  border: 1px dashed #BCCF97;
  color: #3A5A40;
  border-radius: 8px;
  font-weight: 600;
}

/* --- Primary Submit Button --- */
.pmpro .pmpro_btn,
.pmpro input[type="submit"],
.pmpro button[type="submit"] {
  background: #BCCF97;
  border: 1px solid #BCCF97;
  color: #151515;
  border-radius: 999px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
  box-shadow: 0 2px 10px rgba(188, 207, 151, 0.2);
  cursor: pointer;
  min-height: 44px;
}

.pmpro .pmpro_btn:hover,
.pmpro .pmpro_btn:focus,
.pmpro input[type="submit"]:hover,
.pmpro input[type="submit"]:focus,
.pmpro button[type="submit"]:hover,
.pmpro button[type="submit"]:focus {
  background: #9FAF80;
  border-color: #9FAF80;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(159, 175, 128, 0.35);
}

.pmpro .pmpro_btn:active,
.pmpro input[type="submit"]:active,
.pmpro button[type="submit"]:active {
  transform: translateY(0);
  opacity: 0.9;
}

/* --- Outline / Secondary Buttons --- */
.pmpro .pmpro_btn-outline {
  background: transparent;
  border: 1px solid #E7EAED;
  color: #151515;
  box-shadow: none;
}

.pmpro .pmpro_btn-outline:hover,
.pmpro .pmpro_btn-outline:focus {
  background: #F4F1E8;
  border-color: #E7EAED;
  color: #151515;
  transform: none;
  box-shadow: none;
}

/* --- Cancel Button --- */
.pmpro .pmpro_btn-cancel {
  background: transparent;
  border: 1px solid #E7EAED;
  color: #4A5560;
  box-shadow: none;
}

.pmpro .pmpro_btn-cancel:hover,
.pmpro .pmpro_btn-cancel:focus {
  background: #F4F1E8;
  border-color: #d5d9dd;
  color: #151515;
}

/* --- Delete / Danger Button --- */
.pmpro .pmpro_btn-delete {
  background: #EB5757;
  border-color: #EB5757;
  color: #FFFFFF;
}

.pmpro .pmpro_btn-delete:hover,
.pmpro .pmpro_btn-delete:focus {
  background: #c0392b;
  border-color: #c0392b;
  color: #FFFFFF;
}


/* ==========================================================
   4. CONFIRMATION PAGE
   
   The first impression after signup — warm, celebratory,
   and reassuring. Gradient background, elevated content
   card, and a clear CTA to continue.
   ========================================================== */

/* --- Page Background Gradient --- */
body.pmpro-confirmation .site-main,
body.pmpro-confirmation .entry-content {
  background: linear-gradient(175deg, #E9E2D0 0%, #f4f1e8 38%, #FFFFFF 100%);
  padding-bottom: 60px;
}

/* --- Page Title --- */
body.pmpro-confirmation .entry-title {
  font-family: var(--fm-font-heading, 'Avenir', 'Nunito Sans', -apple-system, sans-serif);
  font-weight: 700;
  font-size: 30px;
  color: #151515;
  margin-bottom: 8px;
}

/* --- Confirmation Content Wrapper --- */
body.pmpro-confirmation .pmpro {
  max-width: 720px;
  margin: 0 auto;
}

/* --- Confirmation Section --- */
body.pmpro-confirmation .pmpro_section {
  background: #FFFFFF;
  border: 1px solid #E7EAED;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(21, 21, 21, 0.05);
  padding: 40px 40px 36px;
  margin-bottom: 24px;
}

/* --- Welcome Paragraphs --- */
body.pmpro-confirmation .pmpro_section > p {
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  font-size: 15.5px;
  color: #4A5560;
  line-height: 1.75;
  margin: 0 0 16px;
}

/* First paragraph — the main welcome line */
body.pmpro-confirmation .pmpro_section > p:first-of-type {
  font-size: 17px;
  color: #151515;
  font-weight: 500;
}

/* "Welcome to Navigator." line — make it stand out */
body.pmpro-confirmation .pmpro_section > p:nth-of-type(2) {
  font-family: var(--fm-font-heading, 'Avenir', 'Nunito Sans', -apple-system, sans-serif);
  font-size: 20px;
  font-weight: 700;
  color: #3A5A40;
  margin: 20px 0;
}

/* "Your transformation continues from here." — warm emphasis */
body.pmpro-confirmation .pmpro_section > p:nth-last-of-type(2) {
  font-style: italic;
  color: #3A5A40;
  font-weight: 500;
}

/* --- User Details Card (avatar, username, email, level) --- */
body.pmpro-confirmation .pmpro_card {
  background: #faf9f5;
  border: 1px solid #F4F1E8;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(21, 21, 21, 0.03);
  padding: 28px 32px;
  margin-top: 28px;
}

body.pmpro-confirmation .pmpro_card .pmpro_card_title {
  font-family: var(--fm-font-heading, 'Avenir', 'Nunito Sans', -apple-system, sans-serif);
  font-size: 18px;
  font-weight: 700;
  color: #151515;
  display: flex;
  align-items: center;
  gap: 12px;
}

body.pmpro-confirmation .pmpro_card .pmpro_card_content {
  padding-top: 8px;
}

body.pmpro-confirmation .pmpro_card .pmpro_card_content p,
body.pmpro-confirmation .pmpro_card .pmpro_list_item {
  font-size: 14.5px;
  color: #4A5560;
  line-height: 1.6;
  margin: 6px 0;
}

body.pmpro-confirmation .pmpro_card .pmpro_list_item_label {
  font-weight: 600;
  color: #151515;
}

/* --- Avatar in confirmation card --- */
body.pmpro-confirmation .pmpro_card .avatar {
  border-radius: 50%;
  border: 2px solid #BCCF97;
  box-shadow: 0 2px 8px rgba(188, 207, 151, 0.2);
}

/* --- "View Your Membership Account →" Link --- */
body.pmpro-confirmation .pmpro_actions_nav {
  text-align: center;
  margin-top: 32px;
  padding-top: 0;
}

body.pmpro-confirmation .pmpro_actions_nav a {
  display: inline-block;
  background: #BCCF97;
  border: 1px solid #BCCF97;
  color: #151515;
  border-radius: 999px;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
  box-shadow: 0 2px 10px rgba(188, 207, 151, 0.25);
}

body.pmpro-confirmation .pmpro_actions_nav a:hover {
  background: #9FAF80;
  border-color: #9FAF80;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(159, 175, 128, 0.35);
  text-decoration: none;
}

/* --- Messages (success, error, alert) --- */
.pmpro .pmpro_message.pmpro_success {
  background: #f0f7df;
  border: 1px solid #BCCF97;
  border-left: 4px solid #3A5A40;
  border-radius: 12px;
  color: #3A5A40;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.55;
}

.pmpro .pmpro_message.pmpro_error {
  background: #fdf2f2;
  border: 1px solid #f5c6cb;
  border-left: 4px solid #EB5757;
  border-radius: 12px;
  color: #c0392b;
  padding: 16px 20px;
}

.pmpro .pmpro_message.pmpro_alert {
  background: #fdf6ec;
  border: 1px solid #fdebd0;
  border-left: 4px solid #F2994A;
  border-radius: 12px;
  color: #8a5a00;
  padding: 16px 20px;
}

.pmpro .pmpro_message a {
  color: #3A5A40;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pmpro .pmpro_message a:hover {
  color: #151515;
}


/* ==========================================================
   5. LOGIN & ACCOUNT PAGES
   ========================================================== */

/* --- Login Form --- */
.pmpro #loginform .input,
.pmpro .pmpro_section #loginform .input {
  background: #F4F1E8;
  border: 1px solid #E7EAED;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  color: #151515;
}

.pmpro #loginform .input:focus,
.pmpro .pmpro_section #loginform .input:focus {
  background: #FFFFFF;
  border-color: #BCCF97;
  box-shadow: 0 0 0 3px rgba(188, 207, 151, 0.25);
}

.pmpro .pmpro_section #loginform label {
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  font-size: 14.5px;
  font-weight: 500;
  color: #151515;
}

.pmpro .pmpro_section #loginform .login-submit .button {
  background: #BCCF97;
  border: 1px solid #BCCF97;
  color: #151515;
  border-radius: 999px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

.pmpro .pmpro_section #loginform .login-submit .button:hover,
.pmpro .pmpro_section #loginform .login-submit .button:focus {
  background: #9FAF80;
  border-color: #9FAF80;
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* --- Account Page Lists --- */
.pmpro .pmpro_list_item_label {
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  font-size: 13px;
  color: #A0A7B0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pmpro .pmpro_list_item_value {
  font-weight: 600;
  color: #151515;
}

/* --- Account Avatar --- */
.pmpro .avatar {
  border: 2px solid #F4F1E8;
  box-shadow: 0 4px 12px rgba(21, 21, 21, 0.06);
}


/* ==========================================================
   6. BILLING & CANCEL PAGES
   ========================================================== */

.pmpro .pmpro_price_part-total {
  border-top: 1px solid #F4F1E8;
  font-weight: 700;
}

/* --- Invoice table --- */
.pmpro .pmpro_table thead th {
  font-family: var(--fm-font-heading, 'Avenir', 'Nunito Sans', -apple-system, sans-serif);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #A0A7B0;
}

.pmpro .pmpro_table tbody td {
  font-size: 15px;
  color: #151515;
}

/* --- Order Status Tags --- */
.pmpro .pmpro_tag-success {
  background: #f0f7df;
  border-color: #BCCF97;
  color: #3A5A40;
}


/* ==========================================================
   7. CONTENT RESTRICTION MESSAGES
   
   When non-members hit protected content, style the
   "You need X membership" card warmly.
   ========================================================== */

.pmpro .pmpro_content_message {
  border-radius: 16px;
  border: 1px solid #E7EAED;
  box-shadow: 0 10px 30px rgba(21, 21, 21, 0.04);
}

.pmpro .pmpro_content_message .pmpro_card_title {
  font-family: var(--fm-font-heading, 'Avenir', 'Nunito Sans', -apple-system, sans-serif);
  font-size: 20px;
  color: #151515;
}

.pmpro .pmpro_content_message .pmpro_card_content p {
  color: #4A5560;
  font-size: 15px;
  line-height: 1.6;
}

.pmpro .pmpro_content_message .pmpro_btn {
  border-radius: 999px;
}


/* ==========================================================
   8. NEXTEND SOCIAL LOGIN — BUTTON RESTYLE
   
   Replace the harsh blue/white social buttons with
   softer, FM-branded versions. Buttons keep their provider
   identity (icons) but blend with the brand palette.
   ========================================================== */

/* --- Container spacing --- */
div.nsl-container {
  margin: 16px 0;
}

div.nsl-container .nsl-container-buttons {
  gap: 8px;
  padding: 4px 0;
}

/* --- All buttons: base reset --- */
div.nsl-container .nsl-button {
  border-radius: 999px !important;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

div.nsl-container .nsl-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(21, 21, 21, 0.1);
}

/* --- Default (labeled) buttons --- */
div.nsl-container .nsl-button-default {
  border-radius: 999px !important;
  min-height: 44px;
  align-items: center;
}

div.nsl-container .nsl-button-default div.nsl-button-label-container {
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 16px 10px 0;
}

div.nsl-container .nsl-button-svg-container {
  padding: 8px 10px;
}

/* ---- Facebook ---- */
div.nsl-container .nsl-button-facebook {
  background: #F4F1E8 !important;
  border: 1px solid #E7EAED !important;
  box-shadow: none !important;
}

div.nsl-container .nsl-button-facebook,
div.nsl-container .nsl-button-facebook div.nsl-button-label-container {
  color: #151515 !important;
}

div.nsl-container .nsl-button-facebook:hover {
  background: #eae5d4 !important;
  border-color: #d5d9dd !important;
}

/* ---- Google ---- */
div.nsl-container .nsl-button-google {
  background: #FFFFFF !important;
  border: 1px solid #E7EAED !important;
  box-shadow: none !important;
}

div.nsl-container .nsl-button-google,
div.nsl-container .nsl-button-google div.nsl-button-label-container {
  color: #151515 !important;
}

div.nsl-container .nsl-button-google:hover {
  background: #F4F1E8 !important;
  border-color: #d5d9dd !important;
}

/* ---- Twitter / X ---- */
div.nsl-container .nsl-button-twitter {
  background: #F4F1E8 !important;
  border: 1px solid #E7EAED !important;
  box-shadow: none !important;
}

div.nsl-container .nsl-button-twitter,
div.nsl-container .nsl-button-twitter div.nsl-button-label-container {
  color: #151515 !important;
}

div.nsl-container .nsl-button-twitter:hover {
  background: #eae5d4 !important;
  border-color: #d5d9dd !important;
}

/* ---- Apple (if added) ---- */
div.nsl-container .nsl-button-apple {
  background: #151515 !important;
  border: 1px solid #151515 !important;
  box-shadow: none !important;
}

div.nsl-container .nsl-button-apple,
div.nsl-container .nsl-button-apple div.nsl-button-label-container {
  color: #FFFFFF !important;
}

div.nsl-container .nsl-button-apple:hover {
  background: #2d2d2d !important;
}

/* --- Icon-only button mode --- */
div.nsl-container .nsl-button-icon {
  border-radius: 50% !important;
  width: 44px;
  height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #F4F1E8;
  border: 1px solid #E7EAED;
  transition: background 0.15s ease, transform 0.15s ease;
}

div.nsl-container .nsl-button-icon:hover {
  background: #eae5d4;
  transform: translateY(-1px);
}


/* ==========================================================
   9. NSL — LAYOUT INTEGRATION
   
   Social buttons on login forms, registration forms,
   checkout, and BuddyPress registration.
   ========================================================== */

/* --- Separator line between social + form --- */
div.nsl-container-block .nsl-container-buttons::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #E7EAED;
  margin: 8px 0 4px;
}

/* --- "OR" divider text (if theme adds one) --- */
.nsl-separator,
.nsl-container .nsl-separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  font-size: 13px;
  color: #A0A7B0;
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nsl-separator::before,
.nsl-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E7EAED;
}

/* --- On PMPro Checkout page --- */
.pmpro .nsl-container {
  margin: 20px 0 8px;
}

.pmpro .nsl-container .nsl-container-buttons {
  justify-content: center;
}

/* --- On BuddyBoss/BuddyPress Registration --- */
#buddypress .nsl-container,
.buddypress .nsl-container,
.bp-nouveau .nsl-container {
  margin: 16px 0;
  padding: 0;
}

#buddypress .nsl-container .nsl-button-default,
.bp-nouveau .nsl-container .nsl-button-default {
  border-radius: 999px !important;
}

/* --- On WooCommerce login/registration (if used) --- */
.woocommerce .nsl-container {
  margin: 16px 0;
}


/* ==========================================================
   10. RESPONSIVE
   ========================================================== */

/* --- Tablet & below --- */
@media screen and (max-width: 767px) {

  /* Advanced Levels — stack to single column */
  #pmpro_levels.pmpro_advanced_levels-div {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 520px;
  }

  #pmpro_levels .pmpro_level {
    border-radius: 16px;
  }

  #pmpro_levels .pmpro_level .pmpro_card_content {
    padding: 28px 24px 16px;
  }

  #pmpro_levels .pmpro_level .pmpro_card_content h2 {
    font-size: 20px;
  }

  #pmpro_levels .pmpro_level .pmpro_card_actions {
    flex-direction: column;
    text-align: center;
    padding: 16px 24px;
  }

  #pmpro_levels .pmpro_level .pmpro_card_actions .pmpro_btn {
    width: 100%;
    padding: 12px 20px;
  }

  /* Confirmation page */
  body.pmpro-confirmation .pmpro_section {
    padding: 28px 24px 24px;
    border-radius: 16px;
  }

  body.pmpro-confirmation .pmpro_section > p:nth-of-type(2) {
    font-size: 18px;
  }

  body.pmpro-confirmation .pmpro_card {
    padding: 22px 20px;
  }

  body.pmpro-confirmation .pmpro_actions_nav a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 20px;
  }

  /* Levels page */
  .pmpro .pmpro_level_group .pmpro_card_title {
    font-size: 19px;
    padding: 20px 20px 0;
  }

  .pmpro .pmpro_level_group .pmpro_card_content {
    padding: 10px 20px 24px;
  }

  .pmpro .pmpro_levels_table thead {
    display: none;
  }

  .pmpro .pmpro_levels_table,
  .pmpro .pmpro_levels_table tbody,
  .pmpro .pmpro_levels_table tr,
  .pmpro .pmpro_levels_table th,
  .pmpro .pmpro_levels_table td {
    display: block;
    width: 100%;
  }

  .pmpro .pmpro_levels_table tbody th,
  .pmpro .pmpro_levels_table tbody td {
    padding: 8px 0;
    border: none;
    text-align: left;
  }

  .pmpro .pmpro_levels_table tbody th[data-title="Level"] {
    font-size: 18px;
    padding-top: 20px;
    border-top: 1px solid #F4F1E8;
  }

  .pmpro .pmpro_levels_table tbody tr:first-child th[data-title="Level"] {
    border-top: none;
    padding-top: 8px;
  }

  /* Make buttons full-width on mobile */
  .pmpro .pmpro_levels_table .pmpro_btn-select,
  .pmpro .pmpro_level-current .pmpro_btn-outline {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    margin-top: 4px;
  }

  /* Data attribute labels on mobile */
  .pmpro .pmpro_levels_table tbody td[data-title]::before {
    content: attr(data-title) ": ";
    font-weight: 600;
    font-size: 13px;
    color: #A0A7B0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 4px;
  }

  /* Checkout cards */
  .pmpro .pmpro_card {
    border-radius: 14px;
  }

  .pmpro .pmpro_card_title {
    font-size: 18px;
  }

  .pmpro .pmpro_card_actions {
    padding: 14px 20px;
  }

  /* Form submit */
  .pmpro .pmpro_form_submit {
    flex-direction: column;
  }

  .pmpro .pmpro_form_submit .pmpro_btn {
    width: 100%;
    text-align: center;
  }

  /* Social login buttons full-width */
  div.nsl-container-block .nsl-container-buttons {
    grid-template-columns: 1fr;
  }

  div.nsl-container .nsl-button-default {
    width: 100%;
  }

  div.nsl-container .nsl-button-default div.nsl-button-label-container {
    font-size: 14px;
  }
}

/* --- Small mobile --- */
@media screen and (max-width: 480px) {

  #pmpro_levels .pmpro_level .pmpro_card_content {
    padding: 24px 18px 14px;
  }

  #pmpro_levels .pmpro_level .pmpro_card_content h2 {
    font-size: 18px;
  }

  #pmpro_levels .pmpro_level .pmpro_card_content h3 {
    font-size: 15px;
  }

  #pmpro_levels .pmpro_level .pmpro_card_content p {
    font-size: 14px;
  }

  .pmpro .pmpro_level_group .pmpro_card_title {
    font-size: 17px;
    padding: 18px 16px 0;
  }

  .pmpro .pmpro_level_group .pmpro_card_content {
    padding: 8px 16px 20px;
  }

  .pmpro .pmpro_levels_table .pmpro_btn-select {
    font-size: 14.5px;
    padding: 11px 16px;
  }

  .pmpro .pmpro_card_title {
    font-size: 17px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .pmpro .pmpro_card_content {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* --- Desktop enhancement --- */
@media screen and (min-width: 768px) {

  /* Add slight hover effect to level rows */
  .pmpro .pmpro_levels_table tbody tr {
    transition: background 0.15s ease;
  }

  .pmpro .pmpro_levels_table tbody tr:hover th,
  .pmpro .pmpro_levels_table tbody tr:hover td {
    background: #faf9f5;
  }

  .pmpro .pmpro_level-current:hover th,
  .pmpro .pmpro_level-current:hover td {
    background: #f4faeb;
  }

  /* Align select button right on desktop */
  .pmpro .pmpro_levels_table tbody td:last-child {
    text-align: right;
  }
}


/* ==========================================================
   11. PAGINATION (Orders, Invoices)
   ========================================================== */

.pmpro .pmpro_pagination a {
  border-radius: 8px;
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  font-size: 14px;
}

.pmpro .pmpro_pagination a:hover {
  background: #9FAF80;
  border-color: #9FAF80;
  color: #FFFFFF;
}

.pmpro .pmpro_pagination .pmpro_pagination-current {
  background: #BCCF97;
  border-color: #BCCF97;
  color: #151515;
}


/* ==========================================================
   12. PRINT OVERRIDES
   ========================================================== */

@media print {
  .pmpro .pmpro_btn {
    border: 1px solid #151515;
    box-shadow: none;
  }

  div.nsl-container {
    display: none;
  }
}