/**
 * NomadBold — Paid Memberships Pro reskin
 *
 * CSS-only restyle of PMPro's own default (unbranded, light-theme)
 * checkout / confirmation / invoice / account markup so it matches the
 * dark + gold NomadBold theme. Targets PMPro's stable, documented core
 * class names (pmpro_card, pmpro_form_field, pmpro_btn, pmpro_table,
 * pmpro_list, pmpro_tag, etc.) — does not touch or override any PMPro
 * template files, so PMPro updates stay safe.
 *
 * PMPro ships its own default stylesheet using higher-specificity
 * selectors (e.g. #pmpro_pricing_fields, CSS custom properties set on
 * :root for its light "Design Settings" theme) that would otherwise beat
 * a plain class selector regardless of load order. The color/background/
 * border declarations below use !important specifically to guarantee
 * this reskin always wins over PMPro's own built-in light theme — this
 * is the one file in the theme where that's intentional and necessary.
 *
 * Loaded in two places that both render this same markup:
 *   1. The real, standalone PMPro pages (Checkout, Confirmation, Account…)
 *   2. Inside the NomadBold Dashboard's "Upgrade" popup, which injects
 *      PMPro's real checkout form fetched via AJAX.
 */

/* ---- Page / section wrapper ---- */
.pmpro,
.pmpro_section {
  color: var(--white) !important;
  /* PMPro's own inline SVG icons (e.g. the password show/hide eye) reference
     this custom property directly (stroke="var(--pmpro--color--accent)").
     Left undefined, browsers fall back to black, which is nearly invisible
     against this dark theme — that's the "blurry" eye icon. Defining it
     here makes those icons render in the theme's gold instead. */
  --pmpro--color--accent: var(--gold-lt);
}

/* THE actual source of the big gaps between Membership/Account/Payment
   Information: confirmed via DevTools inspection that the empty space
   belongs to <form id="pmpro_form"> itself, not to any card or fieldset
   margin — meaning PMPro applies a flex/grid `gap` directly on the form
   container, a spacing method completely separate from child margin or
   padding. That's why repeated card/fieldset padding changes never
   touched it. Forcing the form back to plain block layout makes any such
   gap value irrelevant (gap only applies to flex/grid containers). */
.pmpro_form,
#pmpro_form {
  display: block !important;
  gap: 0 !important;
}
#pmpro_form > * {
  margin-top: 0 !important;
}
/* PMPro inserts these between nearly every section as extra "just in case"
   breathing room. Combined with the card's own padding it's what was
   producing the oversized gaps — removing it entirely, not just shrinking
   it, since the cards already have their own padding. */
.pmpro_spacer {
  display: none !important;
}

/* ---- Cards (Membership Information, Account Information, Order, etc.) ---- */
.pmpro_card,
#pmpro_pricing_fields,
#pmpro_user_fields .pmpro_card,
#pmpro_billing_address_fields .pmpro_card,
#pmpro_payment_information_fields .pmpro_card,
#pmpro_order_single .pmpro_card {
  background: var(--charcoal) !important;
  border: 0.5px solid var(--border) !important;
  border-radius: var(--radius);
  padding: 8px 16px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.pmpro_card_title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--white) !important;
  margin: 0 !important;
  padding-bottom: 4px !important;
  border-bottom: 0.5px solid var(--border) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pmpro_card_content {
  padding-top: 0 !important;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gray-lt) !important;
}
.pmpro_card_content p {
  margin: 0 0 6px !important;
  color: inherit !important;
}
.pmpro_card_content strong,
.pmpro_card_content b {
  color: var(--white) !important;
}
.pmpro_card_content a {
  color: var(--gold) !important;
}
#pmpro_account_loggedin {
  color: var(--gray-lt) !important;
}
.pmpro_card_actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 8px;
}
.pmpro_card_action_separator {
  display: none;
}

/* ---- Level / pricing text ---- */
.pmpro_level_name_text,
.pmpro_level_cost_text,
.pmpro_level_expiration_text,
.pmpro_level_description_text {
  color: var(--gray-lt) !important;
  font-size: 15px;
  line-height: 1.7;
}
.pmpro_level_name_text strong {
  color: var(--white) !important;
}
.pmpro_level_cost_text {
  color: var(--gold-lt) !important;
  font-size: 16px;
  font-weight: 500;
  margin: 4px 0;
}

/* ---- Section / form fieldsets ---- */
.pmpro_form_fieldset {
  /* <fieldset> has its own browser-default border + padding (a ~2px groove
     plus ~0.35em/0.75em padding) that was stacking on top of the .pmpro_card
     inside it — the actual source of the oversized gaps between sections.
     Zeroing it out here is most of this fix; the margin below is the only
     spacing that should be left. */
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.pmpro_form_fieldset legend {
  display: none;
}
.pmpro_form_fields {
  display: flex;
  flex-direction: column;
  gap: 8px !important;
  width: 100% !important;
}
/* PMPro's own core CSS constrains this to less than the full card width
   (that's why Expiration/CVC came out narrower than Card Number above it,
   and — same cause — why the full-width Submit button then looked wider
   than that row instead of lining up with it). Forcing it to the same
   100% width as everything else fixes both at once. */
.pmpro_cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 560px) {
  .pmpro_cols-2 { grid-template-columns: 1fr; }
}

/* ---- Form fields ---- */
.pmpro_form_field {
  display: flex;
  flex-direction: column;
  gap: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}
/* The empty mount points Stripe.js fills with its card-number / expiry /
   cvc iframes. Without an explicit 100% width, an empty <div> can end up
   sized by whatever Stripe's default inline styles apply to the iframe,
   rather than filling the field the way a normal text input would. */
#AccountNumber, #Expiry, #CVV {
  width: 100% !important;
}
#AccountNumber iframe, #Expiry iframe, #CVV iframe {
  width: 100% !important;
}
.pmpro_form_label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dim) !important;
}
.pmpro_form_input,
.pmpro_form_input-text,
.pmpro_form_input-email,
.pmpro_form_input-password,
.pmpro_form_input-select,
#pmpro_form input[type="text"],
#pmpro_form input[type="email"],
#pmpro_form input[type="password"],
#pmpro_form input[type="tel"],
#pmpro_form select,
#pmpro_form textarea {
  background: var(--black2) !important;
  border: 0.5px solid var(--border) !important;
  border-radius: var(--radius);
  color: var(--white) !important;
  padding: 12px 14px;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.pmpro_form_input:focus,
#pmpro_form input:focus,
#pmpro_form select:focus {
  outline: none;
  border-color: var(--gold) !important;
}
.pmpro_form_fields-inline {
  display: flex;
  gap: 10px;
  align-items: center;
}
.pmpro_form_field-password-toggle {
  margin-top: 4px;
}
.pmpro_btn-password-toggle {
  background: none !important;
  border: none !important;
  color: var(--gold-lt) !important;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pmpro_btn-password-toggle svg,
.pmpro_btn-password-toggle .pmpro_icon-eye {
  stroke: var(--gold-lt) !important;
  opacity: 1 !important;
}
.pmpro_btn-password-toggle:hover {
  color: var(--gold) !important;
}
.pmpro_btn-password-toggle:hover svg {
  stroke: var(--gold) !important;
}

/* ---- Buttons ---- */
/* The raw <input type="submit"> is inline-block by default, so it only
   sizes to fit its own text — leaving it small and left-aligned under a
   full-width form. Stretching it to match the width of the fields above
   is what "aligns" it properly. */
.pmpro_form_submit {
  width: 100% !important;
  box-sizing: border-box !important;
  /* .pmpro_form_submit sits directly in the <form>, OUTSIDE any
     .pmpro_card — it never gets the card's own 16px side padding, so
     without matching it here the button runs edge-to-edge while "Card
     Number" etc. above sit inset inside the card. This padding lines the
     button's left/right edges up with those fields exactly. Previous
     attempt used a plain (non-!important) padding value that PMPro's own
     core CSS was partly overriding — that's why it was still off by a
     visible amount instead of matching exactly. !important here removes
     any ambiguity about which value actually wins. */
  padding: 0 16px !important;
  margin: 0 !important;
}
#pmpro_submit_span {
  display: block !important;
  width: 100%;
}
.pmpro_btn,
#pmpro_form input[type="submit"],
#pmpro_form button[type="submit"],
.pmpro_btn-submit-checkout {
  display: block;
  width: 100%;
  box-sizing: border-box !important;
  margin: 0 !important;
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 19px;
  letter-spacing: 0.12em;
  color: var(--black) !important;
  background: var(--gold) !important;
  padding: 15px 36px;
  border-radius: 3px;
  border: none !important;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.22s, transform 0.15s;
}
.pmpro_btn:hover,
#pmpro_form input[type="submit"]:hover,
.pmpro_btn-submit-checkout:hover {
  background: var(--gold-lt) !important;
  transform: translateY(-1px);
}
.pmpro_btn-plain,
.pmpro_btn-print {
  background: transparent !important;
  color: var(--gold-dim) !important;
  border: 0.5px solid var(--border) !important;
  border-radius: var(--radius);
  padding: 8px 14px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.pmpro_btn-plain:hover {
  color: var(--gold) !important;
  border-color: var(--gold-dim) !important;
}
#pmpro_processing_message {
  color: var(--gray) !important;
  font-size: 13px;
  margin-top: 10px;
}

/* ---- Messages (errors / success / alerts) ---- */
.pmpro_message {
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
  border: 0.5px solid var(--border) !important;
}
.pmpro_message.pmpro_error {
  background: rgba(201, 90, 76, 0.1) !important;
  border-color: rgba(201, 90, 76, 0.35) !important;
  color: #E8A398 !important;
}
.pmpro_message.pmpro_success {
  background: rgba(120, 201, 76, 0.1) !important;
  border-color: rgba(120, 201, 76, 0.3) !important;
  color: #B7E8A3 !important;
}
.pmpro_message.pmpro_alert {
  background: rgba(201, 168, 76, 0.1) !important;
  border-color: var(--gold-dim) !important;
  color: var(--gold-lt) !important;
}

/* ---- Lists (order meta, account details) ---- */
.pmpro_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pmpro_list_item {
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border) !important;
  font-size: 14px;
  color: var(--gray-lt) !important;
}
.pmpro_list-with-labels .pmpro_list_item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pmpro_list_item_label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dim) !important;
}
.pmpro_list_item_value {
  color: var(--white) !important;
}
.pmpro_list-plain .pmpro_list_item {
  border-bottom: none !important;
  padding: 5px 0;
}
.pmpro_heading-with-avatar {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pmpro_heading-with-avatar img {
  border-radius: 50%;
  border: 0.5px solid var(--border) !important;
}

/* ---- Tags (Paid / Refunded / status badges) ---- */
.pmpro_tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
}
.pmpro_tag-success {
  background: rgba(120, 201, 76, 0.16) !important;
  color: #9EE686 !important;
}
.pmpro_tag-error {
  background: rgba(201, 90, 76, 0.16) !important;
  color: #E8A398 !important;
}
.pmpro_tag-alert,
.pmpro_tag-discount-code {
  background: rgba(201, 168, 76, 0.16) !important;
  color: var(--gold-lt) !important;
}

/* ---- Order / invoice table ---- */
.pmpro_table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
  background: transparent !important;
}
.pmpro_table th,
.pmpro_table td {
  padding: 12px 10px;
  border-bottom: 0.5px solid var(--border) !important;
  text-align: left;
  color: var(--gray-lt) !important;
  background: transparent !important;
}
.pmpro_table thead th {
  color: var(--gold-dim) !important;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.pmpro_table tfoot td {
  color: var(--white) !important;
  font-weight: 500;
}
.pmpro_table tfoot tr:last-child td {
  border-bottom: none !important;
  font-size: 16px;
  color: var(--gold-lt) !important;
  padding-top: 14px;
}

/* ---- Nav links (View Account, View All Orders, etc.) ---- */
.pmpro_actions_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  font-size: 14px;
}
.pmpro_actions_nav a,
.pmpro_card_actions a {
  color: var(--gold) !important;
  text-decoration: none;
}
.pmpro_actions_nav a:hover,
.pmpro_card_actions a:hover {
  color: var(--gold-lt) !important;
  text-decoration: underline;
}

/* ---- Headings that appear inside PMPro content ---- */
.pmpro_font-x-large { font-size: 22px; }
.pmpro_font-large { font-size: 17px; }
.pmpro_font-small { font-size: 12px; color: var(--gray) !important; }
.pmpro_section_title {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
  color: var(--white) !important;
  margin-bottom: 18px;
}

/* ---- Discount code / misc small text ---- */
#other_discount_code_p,
#other_discount_code_toggle,
.pmpro_form_field label,
#discount_code_message {
  color: var(--gray-lt) !important;
}

/* ---- Inside our own modal wrapper: same card treatment, slightly ----
   tighter so it doesn't fight the modal's own padding on small screens */
.nb-checkout-modal-body .pmpro_card,
.nb-checkout-modal-body #pmpro_pricing_fields {
  background: var(--black2) !important;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.nb-checkout-modal-body .pmpro_form_submit {
  margin-top: 14px;
}

/* ---- Generic safety net ----
   PMPro's various flows (checkout, confirmation, invoice, account, and
   any nested/child-page URL it generates mid-flow) don't all guarantee
   the exact same class names on every install/version. This catches any
   plain white "card" box PMPro renders inside its .pmpro wrapper that
   the specific selectors above didn't, so nothing ever shows up
   unstyled/white regardless of which template variant rendered it. */
.pmpro > section,
.pmpro div[id^="pmpro_"],
.pmpro section[id^="pmpro_"] {
  background: var(--charcoal) !important;
  border: 0.5px solid var(--border) !important;
  border-radius: var(--radius);
  color: var(--gray-lt) !important;
}
.pmpro div[id^="pmpro_"] div[id^="pmpro_"],
.pmpro section[id^="pmpro_"] div[id^="pmpro_"] {
  /* nested pmpro_ containers (e.g. card inside a section) shouldn't
     double up on their own border/background */
  border: none !important;
  background: transparent !important;
}
.pmpro table,
.pmpro ul {
  background: transparent !important;
  color: var(--gray-lt) !important;
}
.pmpro table th,
.pmpro table td {
  border-color: var(--border) !important;
  color: var(--gray-lt) !important;
}
.pmpro h1, .pmpro h2, .pmpro h3, .pmpro h4 {
  color: var(--white) !important;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.04em;
}
.pmpro a { color: var(--gold) !important; }
.pmpro a:hover { color: var(--gold-lt) !important; }