/* Checkout page only (loaded after nfe-pmpro.css, so these override its
   general .pmpro{max-width:680px} single-column rule). Two-column layout:
   form left, sticky Order Summary right — the summary card itself is real
   markup injected by nfe_checkout_order_summary() in functions.php, not a
   static mockup. */

/* .nfe-page-main (the generic PMPro-page wrapper in nfe-home.css) caps out at
   900px and already adds 150px of top padding — both fight the wider 2-column
   layout below and stack with .pmpro's own top padding into a huge gap.
   Override it here, scoped to the checkout page only (this file only loads
   there), so login/account/levels keep their normal 900px width. */
.nfe-scope .nfe-page-main{
  max-width:1200px !important;
  padding-top:110px !important;
}

.pmpro{
  max-width:1160px !important;
  padding:20px clamp(20px,4vw,40px) 60px !important;
  display:grid;
  grid-template-columns:1.05fr .85fr;
  gap:40px;
  align-items:start;
}

/* The order summary is injected before <form>, i.e. before the
   section#pmpro_level-X — reorder it to the right visually while keeping it
   first in the DOM (so it can go first again on mobile without JS). */
.pmpro > .nfe-checkout-summary{ order:2; }
.pmpro > [id^="pmpro_level-"]{ order:1; }

.nfe-checkout-summary{
  position:sticky;
  top:110px;
}
.nfe-checkout-summary-inner{
  background:#292f0e;
  color:#ffffff;
  border-radius:20px;
  padding:clamp(26px,3vw,34px);
  box-shadow:0 20px 45px rgba(20,33,25,.16);
}
.nfe-checkout-summary-inner h3{
  font-family:'Manrope',sans-serif;
  letter-spacing:-.02em;
  font-size:18px;
  margin-bottom:18px;
  color:#ffffff;
}
.nfe-summary-plan{
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.nfe-summary-plan-name{
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:20px;
  color:#ffffff;
}
.nfe-summary-cost{
  font-size:14px;
  line-height:1.7;
  color:rgba(255,255,255,.7);
}
.nfe-summary-cost p{ margin:0 0 10px; }
.nfe-summary-cost p:last-child{ margin-bottom:0; }
.nfe-summary-cost strong,
.nfe-summary-cost b{ color:#ffffff; }

/* .pmpro_cols-2 (Password/Confirm Password, Email/Confirm Email,
   ExpirationDate/CVV) was sizing its two columns to fit their content
   instead of splitting evenly, so the Password column (which has extra
   "Show Password" content) ended up a different width than its partner —
   force an even 2-column grid so both sides always line up and get equal
   width, matching the wider layout. */
.pmpro .pmpro_cols-2{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:start;
}
.pmpro .pmpro_cols-2 > *{ width:auto !important; }
.pmpro .pmpro_form_input{ width:100%; }

/* The "Show Password" toggle was pushed into its own row next to the label,
   making the Password field taller than Confirm Password so the two input
   boxes in the grid row above didn't line up. Instead of adding a row, drop
   the toggle into the corner of the input itself (standard eye-icon-in-field
   pattern) so Password keeps the exact same label+input structure as every
   other field and the row heights match automatically. */
/* Label and input share the two grid rows; the toggle is placed in the SAME
   cell as the input (grid-area:input) and centered with align-self, so it's
   always vertically centered on the input's actual rendered height — no
   guessing pixel offsets like a bottom-anchored absolute position would. */
.pmpro #pmpro_user_fields .pmpro_form_field-password{
  display:grid !important;
  grid-template-areas:"label" "input" !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto !important;
  position:relative !important;
}
.pmpro #pmpro_user_fields .pmpro_form_field-password > label{
  grid-area:label !important;
}
.pmpro #pmpro_user_fields .pmpro_form_field-password > input{
  grid-area:input !important;
  width:100%;
}
.pmpro #pmpro_user_fields .pmpro_form_field-password input{
  padding-right:44px !important;
}
.pmpro #pmpro_user_fields .pmpro_form_field-password-toggle{
  grid-area:input !important;
  align-self:center !important;
  justify-self:end !important;
  margin:0 12px 0 0 !important;
  position:relative !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:2;
}
.pmpro #pmpro_user_fields .pmpro_form_field-password-toggle button{
  display:flex;
  width:28px;height:28px;
  align-items:center;justify-content:center;
}
/* Icon-only — the "Show Password" text label is kept for screen readers only. */
.pmpro #pmpro_user_fields .pmpro_form_field-password-toggle-state{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* Discount code strip inside the pricing card — give it its own breathing
   room instead of sitting flush against the price text above it. */
.pmpro #pmpro_pricing_fields .pmpro_card_actions{
  margin-top:18px;
  padding:16px 18px;
  border-radius:12px;
}

/* Fieldsets carry default browser border/padding — PMPro's own CSS restyles
   the .pmpro_card div inside each one, but the <fieldset> itself needs the
   same reset the earlier checkout.html mockup needed. */
.pmpro fieldset{ border:0; padding:0; margin:0 0 20px; min-width:0; }
.pmpro fieldset:last-of-type{ margin-bottom:0; }
.pmpro legend{ padding:0; }

@media(max-width:1000px){
  .pmpro{
    grid-template-columns:1fr !important;
  }
  .pmpro > .nfe-checkout-summary{ order:1; position:static; }
  .pmpro > [id^="pmpro_level-"]{ order:2; }
}
@media(max-width:760px){
  .nfe-scope .nfe-page-main{
    padding-top:90px !important;
  }
  .pmpro{
    padding:16px 14px 40px !important;
  }
}