/* ============================================================================
   ComicsPRO — MemberPress glue
   Token pass over MemberPress's classic (ReadyLaunch OFF) screens: login,
   registration/checkout, account tabs, thank-you — plus the plugin's styled
   unauthorized view (.cp-locked). Same contract as wp.css: no MP template
   overrides, only CSS that lets MP markup wear the design system. Enqueued by
   functions.php only while MemberPress is active.
   ============================================================================ */

/* ---- Members nav, real-member mode --------------------------------------- */
/* layout.css/wp.css style .cp-nav--members as the mockup's inert gray preview.
   For an actual member (body.cp-members, set server-side) the links are live:
   same ink/hover treatment as the public nav. */
body.cp-members .cp-nav--members a { cursor: pointer; color: var(--cp-ink); }
body.cp-members .cp-nav--members a:hover { color: var(--cp-cyan-deep); }
body.cp-members .cp-nav--members .wp-block-navigation-item__content { color: var(--cp-ink); }
body.cp-members .cp-nav--members .wp-block-navigation-item__content:hover { color: var(--cp-cyan-deep); }

/* ---- Wrapper + text ------------------------------------------------------ */
.mp_wrapper { font-family: var(--font-body); color: var(--text-body); }
.mp_wrapper .mp-spacer { display: none; }

/* ---- Form rows ----------------------------------------------------------- */
.mp_wrapper .mp-form-row { margin-bottom: var(--space-5); }
.mp_wrapper .mp-form-label label {
  display: inline-block;
  margin-bottom: var(--space-2);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm);
}
.mp_wrapper .cc-error {
  display: none;
  color: var(--cp-red-deep);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}
.mp_wrapper .invalid .cc-error { display: inline-block; margin-left: var(--space-2); }

/* ---- Inputs: mirror .cp-input (components.css) --------------------------- */
.mp_wrapper input[type="text"],
.mp_wrapper input[type="email"],
.mp_wrapper input[type="password"],
.mp_wrapper input[type="tel"],
.mp_wrapper input[type="url"],
.mp_wrapper input[type="number"],
.mp_wrapper select,
.mp_wrapper textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-body);
  background: var(--cp-white);
  border: var(--stroke-hair) solid var(--border-ink);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-soft-sm);
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.mp_wrapper input::placeholder { color: var(--text-muted); }
.mp_wrapper input:focus-visible,
.mp_wrapper select:focus-visible,
.mp_wrapper textarea:focus-visible {
  outline-width: var(--stroke);
  outline-style: solid;
  outline-color: var(--cp-cyan-deep);
  outline-offset: 1px;
  border-color: var(--cp-cyan-deep);
  box-shadow: none;
}
.mp_wrapper input[type="checkbox"],
.mp_wrapper input[type="radio"] { width: auto; box-shadow: none; accent-color: var(--cp-cyan-deep); }

/* The show/hide password toggle sits inside the field row. */
.mp_wrapper .mp-hide-pw { position: relative; }
.mp_wrapper .mp-hide-pw .button.mp-hide-pw {
  position: absolute; top: 0; right: 0; height: 100%;
  background: none; border: 0; box-shadow: none; cursor: pointer;
  padding: 0 12px; color: var(--text-muted);
}

/* ---- Buttons: mirror .cp-btn (components.css) ---------------------------- */
.mp_wrapper input[type="submit"],
.mp_wrapper button[type="submit"],
.mp_wrapper .button-primary,
.mp_wrapper .mepr-submit,
.mp_wrapper .mepr-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 13px 26px;
  color: var(--cp-ink);
  background: var(--cp-cyan);
  border: var(--stroke) solid var(--border-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop-sm);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-pop), box-shadow var(--dur-fast) var(--ease-pop), background var(--dur) ease;
}
.mp_wrapper input[type="submit"]:hover,
.mp_wrapper button[type="submit"]:hover,
.mp_wrapper .button-primary:hover,
.mp_wrapper .mepr-submit:hover,
.mp_wrapper .mepr-share-button:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-pop);
}

/* ---- Links + secondary actions ------------------------------------------- */
.mp_wrapper a { color: var(--cp-blue); font-weight: var(--fw-bold); }
.mp_wrapper a:hover { color: var(--cp-blue-deep); }
.mp_wrapper .mepr-login-actions { margin-top: var(--space-4); font-size: var(--fs-body-sm); }

/* ---- Errors --------------------------------------------------------------- */
/* Full red card border, matching the design system's card treatment
   (cp-card--featured is a full 5px border, never a one-sided accent). */
.mp_wrapper .mepr_error {
  background: var(--cp-white);
  border: var(--stroke) solid var(--cp-red-deep);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.mp_wrapper .mepr_error ul { margin: 0; padding-left: 1.1em; }

/* ---- Checkout: price line + invoice table -------------------------------- */
.mp_wrapper .mepr_price { display: flex; gap: var(--space-3); font-weight: var(--fw-bold); }
.mp_wrapper .mp_price_str { font-family: var(--font-display); font-size: var(--fs-h4); }
.mp_wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
}
.mp_wrapper table th,
.mp_wrapper table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--stroke-hair) solid var(--border-soft);
}
.mp_wrapper table thead th {
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom-color: var(--border-ink);
}
.mp_wrapper .mp-currency-cell { text-align: right; }
.mp_wrapper .mepr-alt-row { background: var(--surface-panel); }

/* ---- Account tabs --------------------------------------------------------- */
#mepr-account-nav { margin-bottom: var(--space-6); }
#mepr-account-nav ul {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  list-style: none; margin: 0; padding: 0 0 var(--space-3);
  border-bottom: var(--stroke-hair) solid var(--border-soft);
}
#mepr-account-nav .mepr-nav-item a {
  display: inline-flex;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  text-decoration: none;
  padding: 6px 14px;
  border: var(--stroke-hair) solid var(--border-ink);
  border-radius: var(--radius-pill);
  transition: background var(--dur) ease, color var(--dur) ease;
}
#mepr-account-nav .mepr-nav-item a:hover { background: var(--cp-cyan-tint); }
#mepr-account-nav .mepr-active-nav-tab a { background: var(--cp-cyan); }

/* ---- Unauthorized view (rendered by comicspro-core/memberpress.php) ------ */
.cp-locked { display: grid; gap: var(--space-4); justify-items: start; }
.cp-locked .cp-locked__title { margin: 0; }
.cp-locked .cp-locked__excerpt { margin: 0; color: var(--text-muted); }
.cp-locked .cp-locked__pitch { margin: 0; }
.cp-locked .cp-locked__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }