/**
 * Tenets of Power — PMPro Checkout Page Override
 * Drop this into your WordPress theme's style.css or enqueue via functions.php
 * Targets: /membership-checkout/, /membership-account/, /membership-levels/ pages
 */

/* ─── GOOGLE FONTS ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

/* ─── CSS VARIABLES ─────────────────────────────────────────────────────────── */
:root {
  --top-gold:      #c9a84c;
  --gold-light:    #e2c97e;
  --gold-dim:      #8a6f35;
  --bg-black:      #0d0d0b;
  --bg-card:       #141410;
  --bg-card-alt:   #1a1a14;
  --border-gold:   rgba(201, 168, 76, 0.25);
  --border-subtle: rgba(201, 168, 76, 0.10);
  --text-primary:  #e8dfc8;
  --text-muted:    rgba(232, 223, 200, 0.55);
  --font-display:  'Cinzel', serif;
  --font-body:     'Cormorant Garamond', serif;
  --radius:        4px;
  --shadow-gold:   0 0 40px rgba(201, 168, 76, 0.08);
}

/* ─── PAGE BODY ─────────────────────────────────────────────────────────────── */
body.page-membership-checkout,
body.page-membership-account,
body.page-membership-levels,
body.pmpro_body {
  background-color: var(--bg-black) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 18px;
  line-height: 1.7;
}

/* ─── WRAPPER / CONTENT AREA ────────────────────────────────────────────────── */
.pmpro_content_fields,
#pmpro_form,
.entry-content,
.page-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

/* ─── SECTION BOXES ─────────────────────────────────────────────────────────── */
.pmpro_checkout-fields,
#pmpro_checkout_box,
.pmpro_box,
.pmpro_level_cost,
.pmpro_checkout_section {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-gold) !important;
  padding: 36px 40px !important;
  margin-bottom: 28px !important;
}

/* ─── HEADINGS ──────────────────────────────────────────────────────────────── */
.pmpro_checkout h2,
.pmpro_checkout h3,
.pmpro_checkout_section h3,
#pmpro_form h2,
#pmpro_form h3,
#pmpro_checkout_box h3,
.pmpro_checkout-fields > h3,
.pmpro_checkout-fields > h2 {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--top-gold) !important;
  border-bottom: 1px solid var(--border-gold) !important;
  padding-bottom: 16px !important;
  margin-bottom: 28px !important;
}

/* Membership Information heading */
.pmpro_checkout #pmpro_level_cost h2,
.pmpro_level_cost h2 {
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--top-gold) !important;
}

/* ─── MEMBERSHIP INFO COPY ──────────────────────────────────────────────────── */
.pmpro_level_cost p,
.pmpro_checkout p,
#pmpro_form p {
  font-family: var(--font-body) !important;
  color: var(--text-primary) !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
}

.pmpro_level_cost strong,
.pmpro_checkout strong,
#pmpro_form strong {
  color: var(--top-gold) !important;
  font-weight: 600 !important;
}

/* ─── LABELS ────────────────────────────────────────────────────────────────── */
.pmpro_checkout label,
#pmpro_form label,
.pmpro_checkout-fields label {
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--gold-dim) !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* ─── INPUTS ────────────────────────────────────────────────────────────────── */
.pmpro_checkout input[type="text"],
.pmpro_checkout input[type="email"],
.pmpro_checkout input[type="password"],
.pmpro_checkout input[type="tel"],
.pmpro_checkout input[type="number"],
.pmpro_checkout select,
.pmpro_checkout textarea,
#pmpro_form input[type="text"],
#pmpro_form input[type="email"],
#pmpro_form input[type="password"],
#pmpro_form input[type="tel"],
#pmpro_form select {
  background-color: #0a0a08 !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: var(--radius) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 17px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  outline: none !important;
}

.pmpro_checkout input:focus,
#pmpro_form input:focus,
#pmpro_form select:focus {
  border-color: var(--top-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12) !important;
}

.pmpro_checkout input::placeholder,
#pmpro_form input::placeholder {
  color: rgba(232, 223, 200, 0.25) !important;
}

/* ─── SUBMIT / CTA BUTTON ───────────────────────────────────────────────────── */
#pmpro_submit_span input[type="submit"],
.pmpro_checkout input[type="submit"],
#pmpro_form input[type="submit"],
.pmpro_btn-submit-checkout,
a.pmpro_btn,
.pmpro_btn {
  background-color: var(--top-gold) !important;
  color: #0d0d0b !important;
  border: none !important;
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 16px 40px !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
  display: inline-block !important;
  text-decoration: none !important;
  width: auto !important;
}

#pmpro_submit_span input[type="submit"]:hover,
.pmpro_checkout input[type="submit"]:hover,
#pmpro_form input[type="submit"]:hover,
.pmpro_btn:hover {
  background-color: var(--gold-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(201, 168, 76, 0.3) !important;
}

/* ─── SHOW PASSWORD BUTTON ──────────────────────────────────────────────────── */
.pmpro_checkout .pmpro_show_password_toggle,
.pmpro-show-password-toggle,
button[data-action="show-password"],
.pmpro_password_toggle {
  background-color: var(--top-gold) !important;
  color: #0d0d0b !important;
  border: none !important;
  font-family: var(--font-display) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  border-radius: var(--radius) !important;
}

/* ─── CHECKBOXES & RADIOS ───────────────────────────────────────────────────── */
.pmpro_checkout input[type="checkbox"],
.pmpro_checkout input[type="radio"] {
  accent-color: var(--top-gold) !important;
  width: 16px !important;
  height: 16px !important;
}

/* ─── REQUIRED ASTERISK ─────────────────────────────────────────────────────── */
.pmpro_checkout .pmpro_required,
.pmpro_checkout abbr[title="required"] {
  color: var(--top-gold) !important;
}

/* ─── DIVIDERS ──────────────────────────────────────────────────────────────── */
.pmpro_checkout hr,
#pmpro_form hr {
  border: none !important;
  border-top: 1px solid var(--border-gold) !important;
  margin: 28px 0 !important;
}

/* ─── LINKS ─────────────────────────────────────────────────────────────────── */
.pmpro_checkout a,
#pmpro_form a {
  color: var(--top-gold) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--border-gold) !important;
  transition: color 0.2s ease !important;
}

.pmpro_checkout a:hover,
#pmpro_form a:hover {
  color: var(--gold-light) !important;
}

/* ─── ERROR / NOTICE MESSAGES ───────────────────────────────────────────────── */
.pmpro_message,
.pmpro_error,
#pmpro_message {
  background: rgba(201, 168, 76, 0.08) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: var(--radius) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
}

.pmpro_error {
  border-color: rgba(200, 80, 80, 0.4) !important;
  background: rgba(200, 80, 80, 0.07) !important;
}

/* ─── ORDER SUMMARY / TOTAL ─────────────────────────────────────────────────── */
#pmpro_order_summary,
.pmpro_invoice,
.pmpro_order {
  background: var(--bg-card-alt) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: var(--radius) !important;
  padding: 28px 32px !important;
}

.pmpro_order td,
.pmpro_order th,
.pmpro_invoice td,
.pmpro_invoice th {
  font-family: var(--font-body) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  padding: 10px 12px !important;
  font-size: 17px !important;
}

.pmpro_order th,
.pmpro_invoice th {
  font-family: var(--font-display) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--gold-dim) !important;
}

/* ─── MEMBERSHIP LEVELS PAGE ────────────────────────────────────────────────── */
.pmpro_level,
.pmpro_level_wrap {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: var(--radius) !important;
  padding: 32px !important;
  margin-bottom: 20px !important;
}

.pmpro_level h2,
.pmpro_level_name {
  font-family: var(--font-display) !important;
  color: var(--top-gold) !important;
  font-size: 1rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* ─── TWO-COLUMN FIELD ROWS ─────────────────────────────────────────────────── */
.pmpro_checkout-fields .two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}

/* ─── PAYMENT FIELDS (STRIPE/BRAINTREE) ─────────────────────────────────────── */
.pmpro_checkout .StripeElement,
.pmpro_checkout .braintree-hosted-field {
  background: #0a0a08 !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  color: var(--text-primary) !important;
}

.pmpro_checkout .StripeElement--focus,
.pmpro_checkout .braintree-hosted-field-focused {
  border-color: var(--top-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12) !important;
}

/* ─── DECORATIVE TOP RULE ON SECTIONS ───────────────────────────────────────── */
.pmpro_checkout-fields::before,
#pmpro_checkout_box::before {
  content: '' !important;
  display: block !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--top-gold), transparent) !important;
  margin-bottom: 32px !important;
}

/* ─── SCROLLBAR ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-black); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; }