/* MemberPress reskin — brings the classic (non-ReadyLaunch) pricing tables, signup
   / login forms, and account pages into the public design language, using the same
   tokens as public.css so light/dark parity is automatic. Loaded only on MemberPress
   front-end surfaces (see xc_is_memberpress_page), after MemberPress's own CSS so
   these win. Scoped under body.xcp; page-level rules under body.xcp-mepr.
   Targets MemberPress 1.12.x markup. */

/* ── Page frame ─────────────────────────────────────────────────────────────── */
/* Forms read better in a centred, readable column; pricing tables use the full
   page width (they lay out their own columns). */
body.xcp-mepr .xcp-entry .mp_wrapper,
body.xcp-mepr .xcp-entry .mepr-login-form,
body.xcp-mepr .xcp-entry .mepr-account-form {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
}

/* Intro / heading prose above the pricing table is otherwise narrowed to the
   reading measure and centred (public.css), so its left edge doesn't line up with
   the full-width pricing row. On the group page, match it to the page width so
   everything shares the same left edge. (The product page uses its own grid.) */
body.xcp-mepr:not(.xcp-mepr-product) .xcp-entry > p,
body.xcp-mepr:not(.xcp-mepr-product) .xcp-entry > h1,
body.xcp-mepr:not(.xcp-mepr-product) .xcp-entry > h2,
body.xcp-mepr:not(.xcp-mepr-product) .xcp-entry > h3,
body.xcp-mepr:not(.xcp-mepr-product) .xcp-entry > ul,
body.xcp-mepr:not(.xcp-mepr-product) .xcp-entry > ol {
  max-width: var(--xcp-page);
}

/* ── Single membership page: description | signup form, two columns ──────────── */
/* the_content() emits the membership description followed by the signup form. A
   grid pins the form to the right column (via :has, whatever wraps it) and lets the
   description flow down the left, instead of the form sitting centred below. */
@media (min-width: 861px) {
  body.xcp-mepr-product .xcp-entry {
    display: grid;
    grid-template-columns: 1fr minmax(340px, 420px);
    column-gap: 48px;
    align-items: start;
    /* .xcp-entry is full-viewport width (children normally self-centre); as a grid
       it must confine itself to the page column, matching .xcp-page-head. */
    max-width: var(--xcp-page);
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
    box-sizing: border-box;
  }
  body.xcp-mepr-product .xcp-entry > * {
    grid-column: 1;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  /* The form (or whatever directly wraps it) → right column, top, spanning the
     description's rows so it doesn't inflate a single grid row. */
  body.xcp-mepr-product .xcp-entry > #mepr_signup_form,
  body.xcp-mepr-product .xcp-entry > .mepr-signup-form,
  body.xcp-mepr-product .xcp-entry > .mp_wrapper,
  body.xcp-mepr-product .xcp-entry > *:has(#mepr_signup_form) {
    grid-column: 2;
    grid-row: 1 / span 999;
    align-self: start;
    max-width: none;
    margin: 0;
    padding: 22px 22px 6px;
    background: var(--xc-bg-surface);
    border: 1px solid var(--xc-border-subtle);
    border-radius: 12px;
  }
}

/* ── Pricing table (group page) ─────────────────────────────────────────────── */
/* Lay the plan cells out as a centred, wrapping row of cards regardless of which
   classic group theme is selected. */
/* The pricing menu uses MemberPress's "modern" template wrapped in a Splide
   carousel. With a handful of plans we don't want a slider — flatten it into a
   static, even row of cards that fills the container. !important overrides both
   Splide's inline styles (transform, per-slide calc widths + margins) and
   MemberPress's own CSS. */
/* Pin the menu inside the page column. MemberPress's modern template applies a
   negative horizontal margin / full-width breakout to .mepr-price-menu itself,
   which pushed it past the container's left edge — override it to a centred,
   padded block matching the other .xcp-entry children. */
body.xcp .mepr-price-menu {
  box-sizing: border-box !important;
  width: auto !important;
  max-width: var(--xcp-page) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Zero the carousel chrome so the row fills the menu edge-to-edge (Splide pads
   .splide/.splide__track for its arrows and clips the track). */
body.xcp .mepr-price-menu .splide,
body.xcp .mepr-price-menu .splide__track {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
body.xcp .mepr-price-menu .splide__arrows,
body.xcp .mepr-price-menu .splide__arrow,
body.xcp .mepr-price-menu .splide__pagination { display: none !important; }
body.xcp .mepr-price-menu .splide__list,
body.xcp .mepr-price-boxes {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 22px;
  width: 100% !important;
  transform: none !important;           /* kill Splide's translateX */
  margin: 0 !important;                 /* kill the modern template's negative margin */
  padding: 0 !important;
  list-style: none;
  box-sizing: border-box;
}
body.xcp .mepr-price-menu .splide__slide {
  width: auto !important;               /* kill inline calc() width */
  margin: 0 !important;                 /* kill inline margin-right */
  flex: 1 1 0;
  min-width: 210px;
  max-width: 460px;                     /* 3 cards fill evenly; caps width for 1–2 */
  height: auto;
  display: flex;                        /* let the card fill the slide's height */
  flex-direction: column;
}

/* Each card fills its column (the slide, or — in the classic markup — the flex
   item) and stretches to equal height. */
body.xcp .mepr-price-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 24px 22px !important;
  float: none !important;
  background: var(--xc-bg-card) !important;
  border: 1px solid var(--xc-border) !important;
  border-radius: 12px !important;
  color: var(--xc-text) !important;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}
/* Classic layout (box is itself the flex item, no Splide slide). */
body.xcp .mepr-price-boxes > .mepr-price-box { flex: 1 1 0; min-width: 210px; max-width: 460px; }
:root[data-bs-theme="dark"] body.xcp .mepr-price-box { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }

body.xcp .mepr-price-box-head { margin-bottom: 6px; }

/* Title — MemberPress colours it via --mepr-text-color for its header banner, so
   we set the colour explicitly (that's why it read as blank on the card). */
body.xcp .mepr-price-box-title {
  font-family: var(--xcp-serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--xc-text) !important;
  margin: 0 0 6px;
}

/* Price + currency — dialled down from the template's headline size to sit with
   the title (!important beats the modern template's own size). */
body.xcp .mepr-price-box-price {
  font-family: var(--xcp-sans) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--xc-text) !important;
  margin: 6px 0 0 !important;
}
body.xcp .mepr-price-box-price-currency {
  color: var(--xc-text-muted) !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  margin-right: 1px;
}

/* Benefits list */
body.xcp .mepr-price-box-benefits { text-align: left; margin: 12px 0; }
body.xcp .mepr-price-box-benefits-list,
body.xcp .mepr-price-box-benefits-list ul { list-style: none; margin: 0; padding: 0; }
body.xcp .mepr-price-box-benefits-list li {
  padding: 6px 0 6px 22px;
  position: relative;
  border-bottom: 1px solid var(--xc-border-subtle);
  color: var(--xc-text);
  font-size: 15px;
}
body.xcp .mepr-price-box-benefits-list li::before {
  content: "\2713";                     /* check mark */
  position: absolute;
  left: 0;
  color: var(--xc-accent);
  font-weight: 700;
}

/* Foot pinned to the bottom so the buttons align across cards; the empty
   footer/benefits nodes MemberPress always emits collapse. */
body.xcp .mepr-price-box-foot { margin-top: auto; }
body.xcp .mepr-price-box-footer:empty,
body.xcp .mepr-price-box-benefits:empty,
body.xcp .mepr-price-box-benefits-list:empty { display: none; }
/* The button node is a wrapper — reset any inherited box look; the <a> is the button. */
body.xcp .mepr-price-box-button {
  display: block !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

/* ── Buttons (CTA, submit) ──────────────────────────────────────────────────── */
/* Style the clickable element itself (the <a> / <input>), NOT the wrapper div —
   styling both nested one button inside another, which is what pushed the text
   small and off-centre. Full-width block so the label centres cleanly. */
body.xcp .mepr-price-box-button > a,
body.xcp .mepr-price-box-footer > a,
body.xcp .mepr-price-cell-button,
body.xcp .mepr_price_cell a.button,
body.xcp .mepr_price_cell input.button,
body.xcp .mp_wrapper .mepr-submit,
body.xcp .mp_wrapper input[type="submit"],
body.xcp .mp_wrapper button[type="submit"],
body.xcp .mepr-login-form input[type="submit"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 11px 18px !important;
  border: 1px solid var(--xc-accent) !important;
  border-radius: 8px !important;
  background: var(--xc-accent) !important;
  color: var(--xc-bg-base) !important;
  font-family: var(--xcp-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: none !important;
  text-shadow: none !important;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
body.xcp .mepr-price-box-button > a:hover,
body.xcp .mepr-price-box-footer > a:hover,
body.xcp .mepr-price-cell-button:hover,
body.xcp .mepr_price_cell a.button:hover,
body.xcp .mp_wrapper .mepr-submit:hover,
body.xcp .mp_wrapper input[type="submit"]:hover,
body.xcp .mp_wrapper button[type="submit"]:hover,
body.xcp .mepr-login-form input[type="submit"]:hover {
  background: var(--xc-accent-hover) !important;
  border-color: var(--xc-accent-hover) !important;
}

/* ── Forms: signup, login, coupon ───────────────────────────────────────────── */
body.xcp .mp-form-row,
body.xcp .mepr-form-row { margin: 0 0 16px; }

body.xcp .mp-form-label label,
body.xcp .mp-form-row label,
body.xcp .mepr-form-row label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--xcp-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--xc-text);
}

body.xcp .mp_wrapper input[type="text"],
body.xcp .mp_wrapper input[type="email"],
body.xcp .mp_wrapper input[type="tel"],
body.xcp .mp_wrapper input[type="number"],
body.xcp .mp_wrapper input[type="password"],
body.xcp .mp_wrapper select,
body.xcp .mp_wrapper textarea,
body.xcp .mepr-login-form input[type="text"],
body.xcp .mepr-login-form input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  background: var(--xc-bg-elevated) !important;
  border: 1px solid var(--xc-border) !important;
  border-radius: 8px !important;
  color: var(--xc-text) !important;
  font-family: var(--xcp-sans);
  font-size: 15px;
  line-height: 1.4;
}
body.xcp .mp_wrapper input:focus,
body.xcp .mp_wrapper select:focus,
body.xcp .mp_wrapper textarea:focus,
body.xcp .mepr-login-form input:focus {
  outline: none;
  border-color: var(--xc-accent) !important;
  box-shadow: 0 0 0 3px var(--xc-accent-dim);
}
body.xcp .mp_wrapper input::placeholder,
body.xcp .mepr-login-form input::placeholder { color: var(--xc-text-faint); }

/* Description / helper text under a field */
body.xcp .mepr_field_description,
body.xcp .mp-hidden + .cc-error,
body.xcp .description { color: var(--xc-text-muted); font-size: 13px; }

/* Payment method chooser */
body.xcp .mepr-payment-methods-wrapper,
body.xcp .mepr_type {
  margin: 12px 0;
  padding: 14px 16px;
  background: var(--xc-bg-surface);
  border: 1px solid var(--xc-border-subtle);
  border-radius: 10px;
}
body.xcp .mepr-payment-method label { font-weight: 500; }

/* Coupon toggle */
body.xcp .mepr-coupon-section a,
body.xcp a.mepr-coupon-link { color: var(--xc-accent); }

/* ── Account page ───────────────────────────────────────────────────────────── */
body.xcp .mepr-account-nav ul,
body.xcp ul.mepr-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 22px;
  padding: 0 0 2px;
  list-style: none;
  border-bottom: 1px solid var(--xc-border);
}
body.xcp .mepr-account-nav li,
body.xcp ul.mepr-nav li { margin: 0; }
body.xcp .mepr-account-nav a,
body.xcp ul.mepr-nav a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px 8px 0 0;
  color: var(--xc-text-muted);
  text-decoration: none;
  font-family: var(--xcp-sans);
  font-size: 15px;
  font-weight: 500;
}
body.xcp .mepr-account-nav a:hover,
body.xcp ul.mepr-nav a:hover { color: var(--xc-text); background: var(--xc-overlay-subtle); }
body.xcp .mepr-account-nav .mepr-active-nav-tab a,
body.xcp ul.mepr-nav li.mepr-active-nav-tab a {
  color: var(--xc-text);
  border-bottom: 2px solid var(--xc-accent);
}

/* Data tables (subscriptions, payments) */
body.xcp .mepr-account-table,
body.xcp table.mepr-transactions-table,
body.xcp .mp_wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
body.xcp .mepr-account-table th,
body.xcp .mp_wrapper table th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--xc-border);
  color: var(--xc-text-muted);
  font-weight: 600;
}
body.xcp .mepr-account-table td,
body.xcp .mp_wrapper table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--xc-border-subtle);
  color: var(--xc-text);
}

/* ── Notices / alerts ───────────────────────────────────────────────────────── */
body.xcp .mepr_error,
body.xcp .mepr-alert,
body.xcp ul.mepr_error {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(220, 90, 90, 0.12);
  border: 1px solid rgba(220, 90, 90, 0.45);
  color: var(--xc-text);
  list-style: none;
}
body.xcp .mepr_message,
body.xcp .mepr-success {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--xc-accent-dim);
  border: 1px solid var(--xc-border);
  color: var(--xc-text);
}