/* ═══════════════════════════════════════════════════════════════════════════
   subscription.css — Tier badge styles, locked-state rules, and body-class
   visibility utilities for the After Dark membership system.
   All values use custom properties from design-tokens.css.
   Reference: 05-SUBSCRIPTION-INTEGRATION.md
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Tier badges ──────────────────────────────────────────────────────────── */

.ad-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px 3px 6px;
  border: 1px solid currentColor;
  transform: rotate(-1.5deg);
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  backdrop-filter: blur(4px);
}

.ad-tier-badge__icon {
  font-size: 0.9em;
  line-height: 1;
}

.ad-tier-badge--free {
  color: var(--badge-free);
  background: rgba(45, 90, 39, 0.15);
}

.ad-tier-badge--member {
  color: var(--badge-member);
  background: rgba(200, 146, 42, 0.12);
}

.ad-tier-badge--vip {
  color: var(--badge-vip);
  background: rgba(139, 26, 26, 0.15);
  transform: rotate(-2deg);
}

/* Badge in non-positioned context (e.g. episode header, sidebar) */

.ad-tier-badge--inline {
  position: static;
  transform: none;
}


/* ── Locked-state thumbnail dimming ───────────────────────────────────────── */
/*
 * Selectors: body class (user tier) + post class (episode tier).
 * Guest and free users can't access member or VIP episodes.
 * Member users can't access VIP episodes.
 */

.ad-user-guest .ad-episode-member .episode-card__thumbnail,
.ad-user-guest .ad-episode-vip    .episode-card__thumbnail,
.ad-user-free  .ad-episode-member .episode-card__thumbnail,
.ad-user-free  .ad-episode-vip    .episode-card__thumbnail,
.ad-user-expired .ad-episode-member .episode-card__thumbnail,
.ad-user-expired .ad-episode-vip    .episode-card__thumbnail {
  filter: brightness(0.5) saturate(0.3);
}

.ad-user-member .ad-episode-vip .episode-card__thumbnail {
  filter: brightness(0.5) saturate(0.3);
}

/* Lock icon overlay on dimmed thumbnails */

.ad-user-guest .ad-episode-member .episode-card__thumbnail-link::after,
.ad-user-guest .ad-episode-vip    .episode-card__thumbnail-link::after,
.ad-user-free  .ad-episode-member .episode-card__thumbnail-link::after,
.ad-user-free  .ad-episode-vip    .episode-card__thumbnail-link::after,
.ad-user-expired .ad-episode-member .episode-card__thumbnail-link::after,
.ad-user-expired .ad-episode-vip    .episode-card__thumbnail-link::after,
.ad-user-member  .ad-episode-vip    .episode-card__thumbnail-link::after {
  content: '▲';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  color: var(--color-text-muted);
  pointer-events: none;
  z-index: 1;
}

.ad-user-guest .ad-episode-vip    .episode-card__thumbnail-link::after,
.ad-user-free  .ad-episode-vip    .episode-card__thumbnail-link::after,
.ad-user-expired .ad-episode-vip  .episode-card__thumbnail-link::after,
.ad-user-member  .ad-episode-vip  .episode-card__thumbnail-link::after {
  content: '✦';
}

/* Ensure thumbnail-link is positioned for ::after overlay */

.episode-card__thumbnail-link {
  position: relative;
  display: block;
}


/* ── Body class visibility utilities ──────────────────────────────────────── */
/*
 * Use these classes on HTML elements to show/hide content per user state.
 * Example: <div class="ad-member-only"> is hidden from guests and free users.
 */

/* Hide member-only content from guests, free, and expired users */
.ad-user-guest   .ad-member-only,
.ad-user-free    .ad-member-only,
.ad-user-expired .ad-member-only {
  display: none !important;
}

/* Hide VIP-only content from everyone except VIP */
.ad-user-guest   .ad-vip-only,
.ad-user-free    .ad-vip-only,
.ad-user-member  .ad-vip-only,
.ad-user-expired .ad-vip-only {
  display: none !important;
}

/* Hide subscriber-only content from guests */
.ad-user-guest .ad-subscriber-only {
  display: none !important;
}

/* Hide guest-only content from logged-in users */
.ad-user-free    .ad-guest-only,
.ad-user-member  .ad-guest-only,
.ad-user-vip     .ad-guest-only,
.ad-user-expired .ad-guest-only {
  display: none !important;
}

/* Hide the subscribe CTA from active members and VIPs */
.ad-user-member .ad-subscribe-cta,
.ad-user-vip    .ad-subscribe-cta {
  display: none !important;
}

/* Show expired-state messaging only for expired users */
.ad-expired-notice {
  display: none;
}

.ad-user-expired .ad-expired-notice {
  display: block;
}


/* ── Nav member link (plugin-absent fallback) ─────────────────────────────── */

.site-nav__member-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.site-nav__member-link:hover {
  color: var(--color-amber);
  border-color: var(--color-amber);
}


/* ── Subscribe Page Hero ──────────────────────────────────────────────────── */

.subscribe-hero {
  position: relative;
  min-height: 45vh;
  display: flex;
  align-items: center;
  background: var(--color-bg-surface);
  overflow: hidden;
}

.subscribe-hero__overlay {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    color-mix(in srgb, var(--color-amber) 3%, transparent) 40px,
    color-mix(in srgb, var(--color-amber) 3%, transparent) 41px
  );
}

.subscribe-hero__content {
  position: relative;
  z-index: 2;
  padding: var(--space-9) 0;
}

.subscribe-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-text-heading);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
  max-width: 18ch;
}

@media (min-width: 1024px) {
  .subscribe-hero__title {
    font-size: var(--text-4xl);
  }
}

.subscribe-hero__sub {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  max-width: 52ch;
  line-height: 1.65;
}

.subscribe-hero__stamp {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  letter-spacing: 0.2em;
  opacity: 0.6;
  display: inline-block;
}


/* ── Tier Cards ───────────────────────────────────────────────────────────── */

.tier-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
  align-items: start;
}

@media (min-width: 640px) {
  .tier-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .tier-cards {
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
  }
}

.tier-card {
  position: relative;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-8) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.tier-card--featured {
  border-color: var(--color-amber);
  border-width: 2px;
  transform: translateY(-8px);
  box-shadow: 0 0 32px color-mix(in srgb, var(--color-amber) 18%, transparent);
}

/* Single-column layout: remove elevation to prevent overlap with adjacent cards */
@media (max-width: 639px) {
  .tier-card--featured {
    transform: none;
  }
}

.tier-card__badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

/* stamp base already sets border/font/rotation; override display for positioning */
.tier-card__badge.stamp {
  display: inline-block;
}

.tier-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-heading);
  letter-spacing: 0.03em;
  margin: 0;
  padding-right: var(--space-8); /* clear badge */
}

.tier-card__price {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--color-amber);
  letter-spacing: 0.06em;
}

.tier-card__price--plugin {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.tier-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.tier-card__features li {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding-left: var(--space-5);
  position: relative;
  line-height: 1.5;
}

.tier-card__features li::before {
  content: '◉';
  position: absolute;
  left: 0;
  color: var(--color-amber);
  font-size: 0.65em;
  top: 0.2em;
}

.tier-card--vip .tier-card__features li::before {
  content: '✦';
  color: var(--color-red-bright);
}

.tier-card__cta {
  margin-top: var(--space-2);
}

.tier-card__cta .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}


/* ── Subscribe Plans (shortcode wrapper) ──────────────────────────────────── */

.subscribe-plans {
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.subscribe-plans h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text-heading);
  margin-bottom: var(--space-6);
}

.subscribe-plans__unavailable {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: var(--space-6) 0;
}


/* ── Subscribe FAQ ────────────────────────────────────────────────────────── */

.subscribe-faq h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text-heading);
  margin-bottom: var(--space-6);
}

.subscribe-faq__content h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-amber);
  letter-spacing: 0.05em;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.subscribe-faq__content p {
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}


/* ── Subscribe Sample Episode CTA ────────────────────────────────────────── */

.subscribe-sample {
  border-top: 1px solid var(--color-border);
}

.subscribe-sample h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text-heading);
  margin-bottom: var(--space-4);
}

.subscribe-sample__copy {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
  max-width: 55ch;
}

.subscribe-sample__episode {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-green-signal);
}

.subscribe-sample__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.subscribe-sample__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-heading);
  text-decoration: none;
}

.subscribe-sample__title:hover {
  color: var(--color-amber);
}

.subscribe-sample__actions {
  margin-top: var(--space-2);
}


/* ── Community Page ───────────────────────────────────────────────────────── */

/* Hide the guest gate from everyone who has an account */
.ad-user-free    .ad-user-guest-only,
.ad-user-member  .ad-user-guest-only,
.ad-user-vip     .ad-user-guest-only,
.ad-user-expired .ad-user-guest-only {
  display: none;
}

.community-gate {
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-8) 0;
}

.community-gate__label {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.community-gate__message {
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-5);
}

.community-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.community-content__body {
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-border-paper);
}


/* ── PayPress plugin output normalisation ────────────────────────────────── */
/*
 * [pp_plans] and [pp_login] render their own markup. These rules pull plugin
 * output into the design system without touching plugin files.
 * Selectors target generic form patterns since plugin class names may change.
 *
 * CONTRACT DEVIATIONS documented here:
 *   - [ad_subscribe_cta] → [pp_plans]         (spec vs actual plugin)
 *   - [ad_login_form]    → [pp_login]          (spec vs actual plugin)
 *   - [ad_member_badge]  → theme shortcode     (registered in subscription-hooks.php)
 *   - [ad_episode_count] → theme shortcode     (registered in subscription-hooks.php)
 *   - PP_Subscriber::get() shape unverified    (needs runtime test; see body_class hook)
 */

/* Form fields inside plugin output */
.subscribe-plans input[type="text"],
.subscribe-plans input[type="email"],
.subscribe-plans input[type="password"],
.subscribe-plans select,
.community-gate input[type="text"],
.community-gate input[type="email"],
.community-gate input[type="password"] {
  width: 100%;
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition);
}

.subscribe-plans input:focus,
.subscribe-plans select:focus,
.community-gate input:focus {
  border-color: var(--color-amber);
}

/* Submit / action buttons in plugin output */
.subscribe-plans input[type="submit"],
.subscribe-plans button[type="submit"],
.community-gate input[type="submit"],
.community-gate button[type="submit"] {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  background: var(--color-amber);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-amber);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.subscribe-plans input[type="submit"]:hover,
.subscribe-plans button[type="submit"]:hover,
.community-gate input[type="submit"]:hover,
.community-gate button[type="submit"]:hover {
  background: var(--color-amber-bright);
  border-color: var(--color-amber-bright);
}

/* Plugin plan/pricing tables — pull into card aesthetic */
.subscribe-plans table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.subscribe-plans th {
  text-align: left;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-amber);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.subscribe-plans td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

/* Error and notice text from plugin */
.subscribe-plans .pp-error,
.subscribe-plans .pp-notice,
.community-gate .pp-error,
.community-gate .pp-notice {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-red);
  color: var(--color-text-secondary);
  background: var(--color-bg-elevated);
  margin-bottom: var(--space-4);
}

.subscribe-plans .pp-success,
.community-gate .pp-success {
  border-color: var(--color-green-signal);
}


/* ── PayPress UI Overrides ────────────────────────────────────────────────── */
/*
 * Targets paypress.css class names directly. Plugin files are read-only.
 * Load order: paypress.css → this file (enqueued after pp-style in setup.php).
 */

/* ---- Registration: wrap & font ---- */
.pp-reg-wrap {
  font-family: var(--font-body);
}

/* ---- Progress step indicators ---- */
.pp-reg-step-num {
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
}

.pp-reg-step-label {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.pp-reg-progress-line {
  background: var(--color-border);
}

.pp-reg-progress-active .pp-reg-step-num {
  background: var(--color-amber);
  color: var(--color-bg-base);
  border-color: var(--color-amber);
}

.pp-reg-progress-active .pp-reg-step-label {
  color: var(--color-amber);
}

.pp-reg-progress-done .pp-reg-step-num {
  background: var(--color-green-signal);
  color: var(--color-bg-base);
  border-color: var(--color-green-signal);
}

.pp-reg-progress-done .pp-reg-step-label {
  color: var(--color-green-signal);
}

/* ---- Registration panel (white card) ---- */
.pp-reg-panel {
  background: var(--color-bg-surface);
  border-color: var(--color-border);
}

.pp-reg-heading {
  font-family: var(--font-display);
  color: var(--color-text-heading);
  letter-spacing: 0.04em;
}

/* ---- Form fields ---- */
.pp-reg-field label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pp-reg-field input[type="text"],
.pp-reg-field input[type="email"],
.pp-reg-field input[type="password"] {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border-color: var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.pp-reg-field input:focus {
  border-color: var(--color-amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-amber) 15%, transparent);
}

.pp-reg-hint {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* ---- Registration buttons ---- */
.pp-reg-btn-primary {
  background: var(--color-amber);
  border-color: var(--color-amber);
  color: var(--color-bg-base);
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pp-reg-btn-primary:hover {
  background: var(--color-amber-bright);
  border-color: var(--color-amber-bright);
  color: var(--color-bg-base);
}

.pp-reg-btn-primary:disabled {
  opacity: 0.5;
}

.pp-reg-btn-ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

.pp-reg-btn-ghost:hover {
  border-color: var(--color-amber);
  color: var(--color-amber);
}

/* ---- Google SSO button ---- */
.pp-reg-google-btn {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  color: var(--color-text-primary);
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

.pp-reg-google-btn:hover,
.pp-reg-google-btn:focus {
  background: var(--color-bg-elevated);
  border-color: var(--color-amber);
  color: var(--color-text-primary);
  box-shadow: none;
}

/* ---- Divider ---- */
.pp-reg-divider::before {
  background: var(--color-border);
}

.pp-reg-divider span {
  background: var(--color-bg-surface);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* ---- Errors & inline messages ---- */
.pp-reg-error {
  background: color-mix(in srgb, var(--color-red) 10%, var(--color-bg-surface));
  border-color: var(--color-red);
  color: var(--color-red-bright);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.pp-reg-error-inline {
  color: var(--color-red-bright);
  font-family: var(--font-mono);
}

/* ---- Alt / sign-in link ---- */
.pp-reg-alt-link {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.pp-reg-alt-link a {
  color: var(--color-amber);
}

.pp-reg-alt-link a:hover {
  color: var(--color-amber-bright);
}

/* ---- Checkbox label & TOS links ---- */
.pp-reg-checkbox-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.pp-reg-checkbox-label a {
  color: var(--color-amber);
}

/* ---- Success state ---- */
.pp-reg-success-icon {
  background: color-mix(in srgb, var(--color-green-signal) 15%, var(--color-bg-surface));
  color: var(--color-green-signal);
}

/* ---- Plans [pp_plans] ---- */
.pp-plan {
  background: var(--color-bg-surface);
  border-color: var(--color-border);
}

.pp-plan:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-amber) 8%, transparent);
  border-color: var(--color-border-paper);
}

.pp-plan--highlight {
  border-color: var(--color-amber);
  box-shadow: 0 0 0 2px var(--color-amber);
}

.pp-plan__badge {
  background: var(--color-amber);
  color: var(--color-bg-base);
  font-family: var(--font-mono);
}

.pp-plan__name {
  font-family: var(--font-display);
  color: var(--color-text-heading);
  letter-spacing: 0.03em;
}

.pp-plan__amount {
  color: var(--color-amber);
  font-family: var(--font-mono);
}

.pp-plan__currency,
.pp-plan__per {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.pp-plan__trial {
  color: var(--color-green-signal);
  font-family: var(--font-mono);
}

.pp-plan__description {
  color: var(--color-text-secondary);
  font-family: var(--font-body);
}

.pp-plan__btn {
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pp-plan__btn:hover {
  background: var(--color-bg-elevated);
  border-color: var(--color-amber);
  color: var(--color-amber);
  text-decoration: none;
}

.pp-plan__btn--primary {
  background: var(--color-amber);
  color: var(--color-bg-base);
  border-color: var(--color-amber);
}

.pp-plan__btn--primary:hover {
  background: var(--color-amber-bright);
  border-color: var(--color-amber-bright);
  color: var(--color-bg-base);
}

.pp-plan__current-label {
  color: var(--color-green-signal);
  font-family: var(--font-mono);
}

/* ---- Login [pp_login] ---- */
.pp-login-wrap {
  background: var(--color-bg-surface);
  border-color: var(--color-border);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
}

.pp-login-heading {
  font-family: var(--font-display);
  color: var(--color-text-heading);
  letter-spacing: 0.04em;
}

.pp-login-desc {
  color: var(--color-text-secondary);
  font-family: var(--font-body);
}

.pp-form-field label {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pp-form-field input[type="text"],
.pp-form-field input[type="email"],
.pp-form-field input[type="password"] {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border-color: var(--color-border);
  font-family: var(--font-mono);
}

.pp-form-field input:focus {
  border-color: var(--color-amber);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-amber) 15%, transparent);
}

.pp-login-forgot {
  color: var(--color-amber);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.pp-login-forgot:hover {
  color: var(--color-amber-bright);
  text-decoration: none;
}

/* ---- Generic .pp-btn — plugin uses !important so we match ---- */
.pp-btn--primary {
  background: var(--color-amber) !important;
  color: var(--color-bg-base) !important;
  border-color: var(--color-amber) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.pp-btn--primary:hover:not(:disabled) {
  background: var(--color-amber-bright) !important;
  border-color: var(--color-amber-bright) !important;
}

.pp-btn--ghost {
  background: transparent !important;
  color: var(--color-text-muted) !important;
  border: 1px solid var(--color-border) !important;
  font-family: var(--font-mono) !important;
}

.pp-btn--ghost:hover:not(:disabled) {
  background: var(--color-bg-elevated) !important;
  color: var(--color-amber) !important;
  border-color: var(--color-amber) !important;
}

.pp-login-links {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.pp-login-links a {
  color: var(--color-amber);
}

.pp-login-links a:hover {
  color: var(--color-amber-bright);
}

.pp-login-notice,
.pp-account-notice {
  background: color-mix(in srgb, var(--color-amber) 8%, var(--color-bg-surface));
  border-left-color: var(--color-amber);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.pp-form-message--success {
  background: color-mix(in srgb, var(--color-green-signal) 10%, var(--color-bg-surface));
  border-color: var(--color-green-signal);
  color: var(--color-green-signal);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.pp-form-message--error {
  background: color-mix(in srgb, var(--color-red) 10%, var(--color-bg-surface));
  border-color: var(--color-red);
  color: var(--color-red-bright);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* ---- Dashboard ---- */
.pp-card {
  background: var(--color-bg-surface);
  border-color: var(--color-border);
}

.pp-card h2 {
  font-family: var(--font-display);
  color: var(--color-text-heading);
  border-bottom-color: var(--color-border);
}

.pp-label {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.pp-value {
  color: var(--color-text-primary);
  font-family: var(--font-mono);
}

.pp-tabs {
  border-bottom-color: var(--color-border);
}

.pp-tab {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pp-tab:hover { color: var(--color-amber); }

.pp-tab--active {
  color: var(--color-amber);
  border-bottom-color: var(--color-amber);
}

.pp-subtle {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* ---- Gateway picker ---- */
.pp-gateway-btn {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.pp-gateway-btn:hover {
  border-color: var(--color-amber);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-amber) 12%, transparent);
}

/* ---- Stripe card field ----
 * PayPress JS hardcodes color:'#111827' into the Stripe CardElement, so the
 * iframe text is always near-black. The host container must be light enough
 * for that text to show. Using paper tone fits the "aged form" aesthetic. */
.pp-card-field {
  background: var(--color-paper);
  border-color: var(--color-paper-dark);
}

.pp-card-field--focus {
  border-color: var(--color-amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-amber) 15%, transparent);
}

/* ---- Plan cards (dashboard change-plan view) ---- */
.pp-plan-card {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
}

.pp-plan-card:hover { border-color: var(--color-amber); }

.pp-plan-card--current {
  border-color: var(--color-amber);
  background: color-mix(in srgb, var(--color-amber) 5%, var(--color-bg-surface));
}

.pp-plan-card--current:hover { border-color: var(--color-amber); }

.pp-current-plan-label {
  background: var(--color-amber);
  color: var(--color-bg-base);
  font-family: var(--font-mono);
}

.pp-plan-name {
  color: var(--color-text-heading);
  font-family: var(--font-display);
}

.pp-plan-desc {
  color: var(--color-text-muted);
  font-family: var(--font-body);
}

.pp-plan-price {
  color: var(--color-amber);
  font-family: var(--font-mono);
}

.pp-plan-trial {
  color: var(--color-green-signal);
  font-family: var(--font-mono);
}

/* ---- Status badges ---- */
.pp-status-active,
.pp-status-paid   { background: color-mix(in srgb, var(--color-green-signal) 15%, var(--color-bg-surface)); color: var(--color-green-signal); }

.pp-status-canceled,
.pp-status-open   { background: color-mix(in srgb, var(--color-amber) 12%, var(--color-bg-surface)); color: var(--color-amber); }

.pp-status-past_due,
.pp-status-expired,
.pp-status-failed { background: color-mix(in srgb, var(--color-red) 12%, var(--color-bg-surface)); color: var(--color-red-bright); }

.pp-status-paused,
.pp-status-none,
.pp-status-closed { background: var(--color-bg-elevated); color: var(--color-text-muted); }

.pp-status-future  { background: color-mix(in srgb, var(--color-amber) 8%, var(--color-bg-surface)); color: var(--color-text-secondary); }

/* ---- Invoice table ---- */
.pp-invoice-table th {
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.pp-invoice-table th,
.pp-invoice-table td { border-bottom-color: var(--color-border); }

.pp-invoice-table td {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* ---- Paywall gate ---- */
.pp-teaser::after {
  background: linear-gradient(to bottom, transparent, var(--color-bg-base));
}

.pp-paywall {
  background: var(--color-bg-surface);
  border-color: var(--color-border);
}

.pp-paywall-title {
  font-family: var(--font-display);
  color: var(--color-text-heading);
  letter-spacing: 0.04em;
}

.pp-paywall-desc {
  color: var(--color-text-secondary);
  font-family: var(--font-body);
}

.pp-paywall-btn {
  background: var(--color-amber);
  color: var(--color-bg-base) !important;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pp-paywall-btn:hover {
  background: var(--color-amber-bright);
  color: var(--color-bg-base) !important;
}

.pp-paywall-login {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.pp-paywall-login:hover {
  color: var(--color-amber);
  text-decoration: none;
}

/* ---- Loading state ---- */
.pp-loading {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-style: normal;
  letter-spacing: 0.06em;
}

/* ---- Payment form rows (.pp-form-row — used in checkout/change-card step) ---- */
.pp-form-row label {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pp-form-row input[type="text"],
.pp-form-row input[type="email"],
.pp-form-row input[type="password"] {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border-color: var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.pp-form-row input:focus {
  border-color: var(--color-amber);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-amber) 15%, transparent);
  outline: none;
}

/* ---- Dashboard action buttons ----
 * PayPress uses WP's .button class which has no frontend CSS. Our reset.css
 * strips button background/border, making plain .button elements invisible.
 * Style .button elements inside #pp-dashboard so they look like ghost buttons. */
#pp-dashboard .button {
  display: inline-block;
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

#pp-dashboard .button:hover {
  border-color: var(--color-amber);
  color: var(--color-amber);
}

#pp-dashboard .button.button-primary {
  background: var(--color-amber);
  color: var(--color-bg-base);
  border-color: var(--color-amber);
}

#pp-dashboard .button.button-primary:hover {
  background: var(--color-amber-bright);
  border-color: var(--color-amber-bright);
  color: var(--color-bg-base);
}

.pp-btn-danger {
  color: var(--color-red-bright) !important;
  border-color: var(--color-red) !important;
}

.pp-btn-danger:hover {
  background: color-mix(in srgb, var(--color-red) 10%, var(--color-bg-surface)) !important;
}

.pp-btn-link {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--color-amber) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--text-sm) !important;
}

.pp-btn-link:hover { color: var(--color-amber-bright) !important; }

/* ---- Inline messages (.pp-message in dashboard) ---- */
.pp-message { font-family: var(--font-mono); font-size: var(--text-xs); }
.pp-message.pp-success { color: var(--color-green-signal); }
.pp-message.pp-error   { color: var(--color-red-bright); }

/* ---- Change-plan confirmation card ---- */
.pp-plan-change-confirm {
  background: var(--color-bg-surface);
  border-color: var(--color-green-signal);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--color-green-signal) 12%, transparent);
}

.pp-plan-change-confirm__icon {
  background: var(--color-green-signal);
  color: var(--color-bg-base);
}

.pp-plan-change-confirm__title {
  color: var(--color-text-heading);
  font-family: var(--font-display);
}

.pp-plan-change-confirm__body p {
  color: var(--color-text-secondary);
  font-family: var(--font-body);
}

.pp-plan-change-confirm__next {
  border-top-color: var(--color-border);
}

.pp-change-summary {
  color: var(--color-text-heading);
  font-family: var(--font-display);
}

/* ---- Gateway notice ---- */
.pp-gateway-notice {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  background: var(--color-bg-elevated);
  font-size: var(--text-xs);
}

/* ---- Account profile ([pp_account]) ---- */
.pp-account-wrap { color: var(--color-text-primary); }

.pp-account-section {
  color: var(--color-text-heading);
  font-family: var(--font-display);
  border-bottom-color: var(--color-border);
  letter-spacing: 0.03em;
}

.pp-account-hint {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.pp-required { color: var(--color-red-bright); }