/* =============================================================
   Invoice Checkout — Payment Methods Card Redesign v4
   
   Layout:
   ┌──────────────────────────────────────────┐
   │  Payment Methods                     [×] │
   │  ┌────────────────────────────────────┐  │
   │  │  PayPal                            │  │
   │  └────────────────────────────────────┘  │
   │  ┌────────────────────────────────────┐  │
   │  │  Stripe                            │  │
   │  │  ┄ Saved Payment Methods (if any) ┄│  │
   │  │  Credit / Debit Card               │  │
   │  │  [card input ][Pay With Card btn]  │  │
   │  │  ────────── or ──────────          │  │
   │  │  Bank Account (ACH)                │  │
   │  │  [Connect Bank Account btn]        │  │
   │  └────────────────────────────────────┘  │
   └──────────────────────────────────────────┘
   ============================================================= */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --pm-font:              -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                          "Helvetica Neue", Arial, sans-serif;
  --pm-modal-bg:          #ffffff;
  --pm-body-bg:           #f6f7f9;
  --pm-card-bg:           #ffffff;
  --pm-card-border:       rgba(0, 0, 0, 0.08);
  --pm-divider:           rgba(0, 0, 0, 0.07);
  --pm-text:              #111827;
  --pm-text-muted:        #6b7280;
  --pm-text-faint:        #9ca3af;
  --pm-paypal-surface:    #fefaf0;
  --pm-paypal-border:     rgba(255, 196, 57, 0.4);
  --pm-paypal-label:      #003087;
  --pm-stripe-surface:    #ffffff;
  --pm-stripe-accent:     #635bff;
  --pm-stripe-hover:      #5147e5;
  --pm-stripe-ring:       rgba(99, 91, 255, 0.14);
  --pm-stripe-label:      #635bff;
  --pm-ach-accent:        #1a56db;
  --pm-ach-hover:         #1648c8;
  --pm-error:             #dc2626;
  --pm-error-surface:     #fef2f2;
  --pm-remove-border:     rgba(220, 38, 38, 0.3);
  --pm-radius-modal:      16px;
  --pm-radius-card:       12px;
  --pm-radius-input:      8px;
  --pm-radius-btn:        8px;
  --pm-radius-chip:       6px;
  --pm-ease:              cubic-bezier(0.16, 1, 0.3, 1);
  --pm-duration:          160ms;
  --pm-transition:        var(--pm-duration) var(--pm-ease);
}


/* ══════════════════════════════════════════════════════════════
   MODAL SHELL
   ══════════════════════════════════════════════════════════════ */

#cqpim_payment_methods {
  font-family:      var(--pm-font) !important;
  background:       var(--pm-body-bg) !important;
  border-radius:    var(--pm-radius-modal) !important;
  padding:          0 !important;
  overflow:         hidden !important;
  min-width:        320px;
  width:            100%;
  box-sizing:       border-box;
}

#cqpim_payment_methods > h3 {
  font-family:      var(--pm-font) !important;
  font-size:        14px !important;
  font-weight:      600 !important;
  color:            var(--pm-text) !important;
  letter-spacing:   -0.01em;
  margin:           0 !important;
  padding:          21px 18px 14px !important;
  background:       var(--pm-modal-bg) !important;
  border-bottom:    1px solid var(--pm-divider) !important;
  line-height:      1.2 !important;
}


/* ══════════════════════════════════════════════════════════════
   PAYMENT METHOD LIST → CARD STACK
   ══════════════════════════════════════════════════════════════ */

#cqpim_payment_methods > ul {
  list-style:       none !important;
  margin:           0 !important;
  padding:          14px !important;
  display:          flex !important;
  flex-direction:   column !important;
  gap:              10px !important;
  background:       var(--pm-body-bg) !important;
  box-sizing:       border-box;
}

#cqpim_payment_methods > ul > li {
  list-style:       none !important;
  margin:           0 !important;
  padding:          0 !important;
  border-radius:    var(--pm-radius-card) !important;
  overflow:         hidden !important;
}

#cqpim_payment_methods ul,
#cqpim_payment_methods li {
  list-style:       none !important;
}


/* ══════════════════════════════════════════════════════════════
   CARD 1 — PAYPAL
   ══════════════════════════════════════════════════════════════ */

#cqpim_payment_methods li:has(form.paypal) {
  background:       var(--pm-paypal-surface) !important;
  border:           1px solid var(--pm-paypal-border) !important;
}

#cqpim_payment_methods li:has(form.paypal)::before {
  content:          "PayPal";
  display:          block;
  font-size:        10px;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.08em;
  color:            var(--pm-paypal-label);
  opacity:          0.65;
  padding:          12px 14px 0;
}

#cqpim_payment_methods li form.paypal {
  display:          flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  padding:          10px 14px 14px !important;
  margin:           0 !important;
}

#cqpim_payment_methods li form.paypal input[type="image"] {
  max-width:        180px !important;
  height:           auto !important;
  display:          block !important;
  cursor:           pointer !important;
  border-radius:    6px;
  transition:       opacity var(--pm-transition),
                    transform var(--pm-transition) !important;
}

#cqpim_payment_methods li form.paypal input[type="image"]:hover {
  opacity:    0.92;
  transform:  translateY(-1px);
}

#cqpim_payment_methods li form.paypal input[type="image"]:active {
  transform:  translateY(0);
}


/* ══════════════════════════════════════════════════════════════
   CARD 2 — STRIPE
   Card-level label changed to "Stripe"; sub-sections handle
   "Credit / Debit Card" and "Bank Account (ACH)" labels via JS.
   ══════════════════════════════════════════════════════════════ */

#cqpim_payment_methods li:has(#card-element) {
  background:       #e7f2f7 !important;
  border:           1px solid var(--pm-card-border) !important;
}

#cqpim_payment_methods li:has(#card-element)::before {
  content:          "Stripe";
  display:          block;
  font-size:        10px;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.08em;
  color:            var(--pm-stripe-label);
  opacity:          0.75;
  padding:          12px 14px 0;
}


/* ── Sub-section labels (injected by JS) ───────────────────── */

.pm-method-section-label {
  font-size:        11px !important;
  font-weight:      600 !important;
  text-transform:   uppercase !important;
  letter-spacing:   0.06em !important;
  color:            var(--pm-text-muted) !important;
  padding:          10px 14px 2px !important;
  margin:           0 !important;
}


/* ── "or" divider between Card and ACH ─────────────────────── */

.pm-or-divider {
  display:          flex !important;
  align-items:      center !important;
  gap:              10px !important;
  margin:           16px 14px !important;
  color:            var(--pm-text-faint) !important;
  font-size:        11px !important;
  font-weight:      500 !important;
  text-transform:   uppercase !important;
  letter-spacing:   0.08em !important;
}

.pm-or-divider::before,
.pm-or-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--pm-divider);
}

.pm-or-divider span {
  flex-shrink: 0;
}


/* ── Saved Payment Methods ─────────────────────────────────── */

#pto-saved-pms {
  padding:        8px 14px 10px !important;
  border-bottom:  1px solid var(--pm-divider) !important;
  margin:         0 !important;
}

#pto-saved-pms > p {
  font-size:      11px !important;
  font-weight:    600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color:          var(--pm-text-muted) !important;
  margin:         0 0 7px !important;
}

.pto-saved-pm-row {
  display:        flex !important;
  align-items:    center !important;
  gap:            8px !important;
  margin-bottom:  4px !important;
  padding:        6px 8px !important;
  border-radius:  var(--pm-radius-chip) !important;
  background:     var(--pm-body-bg) !important;
  border:         1px solid transparent !important;
  transition:     border-color var(--pm-transition),
                  background var(--pm-transition) !important;
}

.pto-saved-pm-row:has(input[type="radio"]:checked) {
  border-color:   rgba(99, 91, 255, 0.35) !important;
  background:     rgba(99, 91, 255, 0.04) !important;
}

.pto-saved-pm-row label {
  flex:           1 !important;
  cursor:         pointer !important;
  font-size:      13px !important;
  color:          var(--pm-text) !important;
  display:        flex !important;
  align-items:    center !important;
  gap:            6px !important;
  margin:         0 !important;
  font-weight:    400 !important;
}

.pto-saved-pm-row input[type="radio"],
#pto-saved-pms > label input[type="radio"] {
  accent-color:   var(--pm-stripe-accent) !important;
  width:          14px !important;
  height:         14px !important;
  margin:         0 !important;
  flex-shrink:    0 !important;
  cursor:         pointer !important;
}

.pto-remove-saved-pm {
  font-size:      11px !important;
  font-weight:    500 !important;
  padding:        3px 8px !important;
  border-radius:  var(--pm-radius-chip) !important;
  background:     transparent !important;
  color:          var(--pm-error) !important;
  border:         1px solid var(--pm-remove-border) !important;
  cursor:         pointer !important;
  flex-shrink:    0 !important;
  line-height:    1.4 !important;
  transition:     background var(--pm-transition),
                  border-color var(--pm-transition),
                  color var(--pm-transition) !important;
}

.pto-remove-saved-pm:hover {
  background:     var(--pm-error-surface) !important;
  border-color:   var(--pm-error) !important;
}

#pto-saved-pms > label {
  display:        flex !important;
  align-items:    center !important;
  gap:            6px !important;
  font-size:      13px !important;
  color:          var(--pm-text-muted) !important;
  cursor:         pointer !important;
  padding:        6px 8px !important;
  border-radius:  var(--pm-radius-chip) !important;
  margin-top:     2px !important;
  transition:     color var(--pm-transition) !important;
  text-transform: uppercase;
}

#pto-saved-pms > label:has(input:checked) {
  color:          var(--pm-text) !important;
}

#pto-saved-pm-pay {
  padding:        0 14px 2px !important;
  margin:         0 !important;
}

#pto-saved-pm-errors {
  font-size:      12px !important;
  color:          var(--pm-error) !important;
  padding:        4px 14px !important;
  min-height:     0 !important;
  margin:         0 !important;
  line-height:    1.4 !important;
}


/* ── Stripe Card Element Input ─────────────────────────────── */

#card-element {
  margin:         4px 14px 0 !important;
  padding:        10px 11px !important;
  border:         1px solid rgba(0, 0, 0, 0.14) !important;
  border-radius:  var(--pm-radius-input) !important;
  background:     var(--pm-modal-bg) !important;
  transition:     border-color var(--pm-transition),
                  box-shadow var(--pm-transition) !important;
  box-sizing:     border-box !important;
}

#card-element.StripeElement--focus,
#card-element:focus-within {
  border-color:   var(--pm-stripe-accent) !important;
  box-shadow:     0 0 0 3px var(--pm-stripe-ring) !important;
}

#card-element.StripeElement--invalid {
  border-color:   var(--pm-error) !important;
  box-shadow:     0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

#card-errors {
  font-size:      12px !important;
  color:          var(--pm-error) !important;
  padding:        5px 14px 0 !important;
  min-height:     0 !important;
  margin:         0 !important;
  line-height:    1.4 !important;
}


/* ── "Pay With Card" Button ────────────────────────────────── */

#pto-submit-payment {
  display:        block !important;
  width:          calc(100% - 28px) !important;
  margin:         10px 14px 12px !important;
  padding:        6px 16px !important;
  background:     var(--pm-stripe-accent) !important;
  color:          #ffffff !important;
  font-family:    var(--pm-font) !important;
  font-size:      14px !important;
  font-weight:    600 !important;
  letter-spacing: 0.01em !important;
  text-align:     center !important;
  border:         none !important;
  border-radius:  var(--pm-radius-btn) !important;
  cursor:         pointer !important;
  box-shadow:     0 1px 3px rgba(99, 91, 255, 0.28) !important;
  transition:     background var(--pm-transition),
                  box-shadow var(--pm-transition),
                  transform var(--pm-transition) !important;
  box-sizing:     border-box !important;
}

#pto-submit-payment:hover {
  background:     var(--pm-stripe-hover) !important;
  box-shadow:     0 4px 14px rgba(99, 91, 255, 0.38) !important;
  transform:      translateY(-1px);
}

#pto-submit-payment:active {
  transform:      translateY(0) !important;
  box-shadow:     0 1px 3px rgba(99, 91, 255, 0.2) !important;
}

#pto-submit-payment:disabled {
  opacity:        0.55 !important;
  cursor:         not-allowed !important;
  transform:      none !important;
}

#pto-submit-saved-pm {
  display:        block !important;
  width:          100% !important;
  margin:         4px 0 6px !important;
  padding:        6px 16px !important;
  background:     var(--pm-stripe-accent) !important;
  color:          #ffffff !important;
  font-family:    var(--pm-font) !important;
  font-size:      14px !important;
  font-weight:    600 !important;
  letter-spacing: 0.01em !important;
  text-align:     center !important;
  border:         none !important;
  border-radius:  var(--pm-radius-btn) !important;
  cursor:         pointer !important;
  box-shadow:     0 1px 3px rgba(99, 91, 255, 0.28) !important;
  transition:     background var(--pm-transition),
                  box-shadow var(--pm-transition),
                  transform var(--pm-transition) !important;
  box-sizing:     border-box !important;
}

#pto-submit-saved-pm:hover {
  background:     var(--pm-stripe-hover) !important;
  box-shadow:     0 4px 14px rgba(99, 91, 255, 0.38) !important;
  transform:      translateY(-1px);
}

#pto-submit-saved-pm:disabled {
  opacity:        0.55 !important;
  cursor:         not-allowed !important;
  transform:      none !important;
}


/* ══════════════════════════════════════════════════════════════
   ACH — now inside the Stripe card as a sub-section
   JS moves #cqpim_payment_ach_container inside the Stripe li.
   ══════════════════════════════════════════════════════════════ */

#cqpim_payment_ach_container {
  padding:        0 0 14px !important;
  margin:         0 !important;
  background:     transparent !important;
  border:         none !important;
  box-sizing:     border-box !important;
}

/* Remove the standalone card styles that were on ACH in v3 */
#cqpim_payment_ach_container::before {
  display:        none !important;
}

#ach-errors {
  font-size:      12px !important;
  color:          var(--pm-error) !important;
  margin:         6px 14px 0 !important;
  min-height:     0 !important;
  line-height:    1.4 !important;
}

#ach-mandate-section {
  margin:         10px 14px 0 !important;
  padding-top:    10px !important;
  border-top:     1px solid var(--pm-divider) !important;
}

#ach-bank-details {
  font-size:      13px !important;
  font-weight:    600 !important;
  color:          var(--pm-text) !important;
  margin-bottom:  6px !important;
}

#ach-mandate-section > p {
  font-size:      11px !important;
  color:          var(--pm-text-muted) !important;
  line-height:    1.55 !important;
  margin-bottom:  10px !important;
  max-width:      100% !important;
}

#pto-submit-ach {
  display:        block !important;
  width:          calc(100% - 28px) !important;
  margin:         8px 14px 0 !important;
  padding:        6px 16px !important;
  background:     var(--pm-ach-accent) !important;
  color:          #ffffff !important;
  font-family:    var(--pm-font) !important;
  font-size:      14px !important;
  font-weight:    600 !important;
  letter-spacing: 0.01em !important;
  text-align:     center !important;
  border:         none !important;
  border-radius:  var(--pm-radius-btn) !important;
  cursor:         pointer !important;
  box-shadow:     0 1px 3px rgba(26, 86, 219, 0.22) !important;
  transition:     background var(--pm-transition),
                  box-shadow var(--pm-transition),
                  transform var(--pm-transition) !important;
  box-sizing:     border-box !important;
}

#pto-submit-ach:hover {
  background:     var(--pm-ach-hover) !important;
  box-shadow:     0 4px 12px rgba(26, 86, 219, 0.32) !important;
  transform:      translateY(-1px);
}

#pto-submit-ach:active {
  transform:      translateY(0) !important;
}

#pto-submit-ach:disabled {
  opacity:        0.55 !important;
  cursor:         not-allowed !important;
  transform:      none !important;
}

#pto-confirm-ach {
  display:        block !important;
  width:          100% !important;
  padding:        10px 16px !important;
  background:     var(--pm-ach-accent) !important;
  color:          #ffffff !important;
  font-family:    var(--pm-font) !important;
  font-size:      14px !important;
  font-weight:    600 !important;
  letter-spacing: 0.01em !important;
  text-align:     center !important;
  border:         none !important;
  border-radius:  var(--pm-radius-btn) !important;
  cursor:         pointer !important;
  box-shadow:     0 1px 3px rgba(26, 86, 219, 0.22) !important;
  transition:     background var(--pm-transition),
                  box-shadow var(--pm-transition),
                  transform var(--pm-transition) !important;
  box-sizing:     border-box !important;
}

#pto-confirm-ach:hover {
  background:     var(--pm-ach-hover) !important;
  box-shadow:     0 4px 12px rgba(26, 86, 219, 0.32) !important;
  transform:      translateY(-1px);
}

#pto-confirm-ach:disabled {
  opacity:        0.55 !important;
  cursor:         not-allowed !important;
  transform:      none !important;
}


/* ══════════════════════════════════════════════════════════════
   HIDDEN FORMS
   ══════════════════════════════════════════════════════════════ */

#pto-stripe-form,
#pto-ach-form {
  display:        none !important;
  margin:         0 !important;
  padding:        0 !important;
  border:         none !important;
}


/* ══════════════════════════════════════════════════════════════
   AMOUNT TO PAY (partial payments)
   ══════════════════════════════════════════════════════════════ */

#payment-amount {
  font-family:    var(--pm-font) !important;
  padding:        10px 14px !important;
  background:     var(--pm-modal-bg) !important;
  border-bottom:  1px solid var(--pm-divider) !important;
  font-size:      13px !important;
  color:          var(--pm-text) !important;
  display:        flex !important;
  align-items:    center !important;
  gap:            8px !important;
  flex-wrap:      wrap !important;
}

#payment-amount span {
  font-weight:    600 !important;
  font-size:      13px !important;
  color:          var(--pm-text) !important;
}

#amounttopay {
  padding:        5px 8px !important;
  border:         1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius:  var(--pm-radius-chip) !important;
  font-size:      13px !important;
  color:          var(--pm-text) !important;
  background:     var(--pm-modal-bg) !important;
  transition:     border-color var(--pm-transition),
                  box-shadow var(--pm-transition) !important;
  outline:        none !important;
  width:          90px !important;
}

#amounttopay:focus {
  border-color:   var(--pm-stripe-accent) !important;
  box-shadow:     0 0 0 3px rgba(99, 91, 255, 0.14) !important;
}

#saveamount {
  padding:        5px 10px !important;
  background:     var(--pm-stripe-accent) !important;
  color:          #ffffff !important;
  font-size:      12px !important;
  font-weight:    600 !important;
  border:         none !important;
  border-radius:  var(--pm-radius-chip) !important;
  cursor:         pointer !important;
  transition:     background var(--pm-transition) !important;
}

#saveamount:hover {
  background:     var(--pm-stripe-hover) !important;
}

#amountspinner {
  font-size:      12px !important;
  color:          var(--pm-text-muted) !important;
}

#pto-submit-payment {
    font-size: 0 !important;
}

#pto-submit-payment::after {
    content: 'Pay via Credit Card';
    font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 440px) {
  #cqpim_payment_methods {
    border-radius:  12px !important;
    min-width:      0 !important;
  }

  #cqpim_payment_methods > ul {
    padding:        10px !important;
    gap:            8px !important;
  }

  #pto-submit-payment,
  #pto-submit-ach {
    width:          calc(100% - 20px) !important;
    margin-left:    10px !important;
    margin-right:   10px !important;
  }

  #card-element {
    margin:         4px 10px 0 !important;
  }
}

/* =============================================================
   Invoice Checkout — Payment Methods Card Redesign v4
   
   Layout:
   ┌──────────────────────────────────────────┐
   │  Payment Methods                     [×] │
   │  ┌────────────────────────────────────┐  │
   │  │  PayPal                            │  │
   │  └────────────────────────────────────┘  │
   │  ┌────────────────────────────────────┐  │
   │  │  Stripe                            │  │
   │  │  ┄ Saved Payment Methods (if any) ┄│  │
   │  │  Credit / Debit Card               │  │
   │  │  [card input ][Pay With Card btn]  │  │
   │  │  ────────── or ──────────          │  │
   │  │  Bank Account (ACH)                │  │
   │  │  [Connect Bank Account btn]        │  │
   │  └────────────────────────────────────┘  │
   └──────────────────────────────────────────┘
   ============================================================= */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --pm-font:              -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                          "Helvetica Neue", Arial, sans-serif;
  --pm-modal-bg:          #ffffff;
  --pm-body-bg:           #f6f7f9;
  --pm-card-bg:           #ffffff;
  --pm-card-border:       rgba(0, 0, 0, 0.08);
  --pm-divider:           rgba(0, 0, 0, 0.07);
  --pm-text:              #111827;
  --pm-text-muted:        #6b7280;
  --pm-text-faint:        #9ca3af;
  --pm-paypal-surface:    #fefaf0;
  --pm-paypal-border:     rgba(255, 196, 57, 0.4);
  --pm-paypal-label:      #003087;
  --pm-stripe-surface:    #ffffff;
  --pm-stripe-accent:     #635bff;
  --pm-stripe-hover:      #5147e5;
  --pm-stripe-ring:       rgba(99, 91, 255, 0.14);
  --pm-stripe-label:      #635bff;
  --pm-ach-accent:        #1a56db;
  --pm-ach-hover:         #1648c8;
  --pm-error:             #dc2626;
  --pm-error-surface:     #fef2f2;
  --pm-remove-border:     rgba(220, 38, 38, 0.3);
  --pm-radius-modal:      16px;
  --pm-radius-card:       12px;
  --pm-radius-input:      8px;
  --pm-radius-btn:        8px;
  --pm-radius-chip:       6px;
  --pm-ease:              cubic-bezier(0.16, 1, 0.3, 1);
  --pm-duration:          160ms;
  --pm-transition:        var(--pm-duration) var(--pm-ease);
}


/* ══════════════════════════════════════════════════════════════
   MODAL SHELL
   ══════════════════════════════════════════════════════════════ */

#cqpim_payment_methods {
  font-family:      var(--pm-font) !important;
  background:       var(--pm-body-bg) !important;
  border-radius:    var(--pm-radius-modal) !important;
  padding:          0 !important;
  overflow:         hidden !important;
  min-width:        320px;
  width:            100%;
  box-sizing:       border-box;
}

#cqpim_payment_methods > h3 {
  font-family:      var(--pm-font) !important;
  font-size:        14px !important;
  font-weight:      600 !important;
  color:            var(--pm-text) !important;
  letter-spacing:   -0.01em;
  margin:           0 !important;
  padding:          16px 18px 14px !important;
  background:       var(--pm-modal-bg) !important;
  border-bottom:    1px solid var(--pm-divider) !important;
  line-height:      1.2 !important;
}


/* ══════════════════════════════════════════════════════════════
   PAYMENT METHOD LIST → CARD STACK
   ══════════════════════════════════════════════════════════════ */

#cqpim_payment_methods > ul {
  list-style:       none !important;
  margin:           0 !important;
  padding:          14px !important;
  display:          flex !important;
  flex-direction:   column !important;
  gap:              10px !important;
  background:       var(--pm-body-bg) !important;
  box-sizing:       border-box;
}

#cqpim_payment_methods > ul > li {
  list-style:       none !important;
  margin:           0 !important;
  padding:          0 !important;
  border-radius:    var(--pm-radius-card) !important;
  overflow:         hidden !important;
}

#cqpim_payment_methods ul,
#cqpim_payment_methods li {
  list-style:       none !important;
}


/* ══════════════════════════════════════════════════════════════
   CARD 1 — PAYPAL
   ══════════════════════════════════════════════════════════════ */

#cqpim_payment_methods li:has(form.paypal) {
  background:       var(--pm-paypal-surface) !important;
  border:           1px solid var(--pm-paypal-border) !important;
}

#cqpim_payment_methods li:has(form.paypal)::before {
  content:          "PayPal";
  display:          block;
  font-size:        10px;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.08em;
  color:            var(--pm-paypal-label);
  opacity:          0.65;
  padding:          12px 14px 0;
}

#cqpim_payment_methods li form.paypal {
  display:          flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  padding:          10px 14px 14px !important;
  margin:           0 !important;
}

#cqpim_payment_methods li form.paypal input[type="image"] {
  max-width:        180px !important;
  height:           auto !important;
  display:          block !important;
  cursor:           pointer !important;
  border-radius:    6px;
  transition:       opacity var(--pm-transition),
                    transform var(--pm-transition) !important;
}

#cqpim_payment_methods li form.paypal input[type="image"]:hover {
  opacity:    0.92;
  transform:  translateY(-1px);
}

#cqpim_payment_methods li form.paypal input[type="image"]:active {
  transform:  translateY(0);
}


/* ══════════════════════════════════════════════════════════════
   CARD 2 — STRIPE
   Card-level label changed to "Stripe"; sub-sections handle
   "Credit / Debit Card" and "Bank Account (ACH)" labels via JS.
   ══════════════════════════════════════════════════════════════ */

#cqpim_payment_methods li:has(#card-element) {
  background:       var(--pm-stripe-surface) !important;
  border:           1px solid var(--pm-card-border) !important;
}

#cqpim_payment_methods li:has(#card-element)::before {
  content:          "Stripe";
  display:          block;
  font-size:        10px;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.08em;
  color:            var(--pm-stripe-label);
  opacity:          0.75;
  padding:          12px 14px 0;
}


/* ── Sub-section labels (injected by JS) ───────────────────── */

.pm-method-section-label {
  font-size:        11px !important;
  font-weight:      600 !important;
  text-transform:   uppercase !important;
  letter-spacing:   0.06em !important;
  color:            var(--pm-text-muted) !important;
  padding:          10px 14px 2px !important;
  margin:           0 !important;
}


/* ── "or" divider between Card and ACH ─────────────────────── */

.pm-or-divider {
  display:          flex !important;
  align-items:      center !important;
  gap:              10px !important;
  margin:           4px 14px !important;
  color:            var(--pm-text-faint) !important;
  font-size:        11px !important;
  font-weight:      500 !important;
  text-transform:   uppercase !important;
  letter-spacing:   0.08em !important;
}

.pm-or-divider::before,
.pm-or-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--pm-divider);
}

.pm-or-divider span {
  flex-shrink: 0;
}


/* ── Saved Payment Methods ─────────────────────────────────── */

#pto-saved-pms {
  padding:        8px 14px 10px !important;
  border-bottom:  1px solid var(--pm-divider) !important;
  margin:         0 !important;
}

#pto-saved-pms > p {
  font-size:      11px !important;
  font-weight:    600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color:          var(--pm-text-muted) !important;
  margin:         0 0 7px !important;
}

.pto-saved-pm-row {
  display:        flex !important;
  align-items:    center !important;
  gap:            8px !important;
  margin-bottom:  4px !important;
  padding:        6px 8px !important;
  border-radius:  var(--pm-radius-chip) !important;
  background:     var(--pm-body-bg) !important;
  border:         1px solid transparent !important;
  transition:     border-color var(--pm-transition),
                  background var(--pm-transition) !important;
}

.pto-saved-pm-row:has(input[type="radio"]:checked) {
  border-color:   rgba(99, 91, 255, 0.35) !important;
  background:     rgba(99, 91, 255, 0.04) !important;
}

.pto-saved-pm-row label {
  flex:           1 !important;
  cursor:         pointer !important;
  font-size:      13px !important;
  color:          var(--pm-text) !important;
  display:        flex !important;
  align-items:    center !important;
  gap:            6px !important;
  margin:         0 !important;
  font-weight:    400 !important;
}

.pto-saved-pm-row input[type="radio"],
#pto-saved-pms > label input[type="radio"] {
  accent-color:   var(--pm-stripe-accent) !important;
  width:          14px !important;
  height:         14px !important;
  margin:         0 !important;
  flex-shrink:    0 !important;
  cursor:         pointer !important;
}

.pto-remove-saved-pm {
  font-size:      11px !important;
  font-weight:    500 !important;
  padding:        3px 8px !important;
  border-radius:  var(--pm-radius-chip) !important;
  background:     transparent !important;
  color:          var(--pm-error) !important;
  border:         1px solid var(--pm-remove-border) !important;
  cursor:         pointer !important;
  flex-shrink:    0 !important;
  line-height:    1.4 !important;
  transition:     background var(--pm-transition),
                  border-color var(--pm-transition),
                  color var(--pm-transition) !important;
}

.pto-remove-saved-pm:hover {
  background:     var(--pm-error-surface) !important;
  border-color:   var(--pm-error) !important;
}

#pto-saved-pms > label {
  display:        flex !important;
  align-items:    center !important;
  gap:            6px !important;
  font-size:      13px !important;
  color:          var(--pm-text-muted) !important;
  cursor:         pointer !important;
  padding:        6px 8px !important;
  border-radius:  var(--pm-radius-chip) !important;
  margin-top:     2px !important;
  transition:     color var(--pm-transition) !important;
}

#pto-saved-pms > label:has(input:checked) {
  color:          var(--pm-text) !important;
}

#pto-saved-pm-pay {
  padding:        0 14px 2px !important;
  margin:         0 !important;
}

#pto-saved-pm-errors {
  font-size:      12px !important;
  color:          var(--pm-error) !important;
  padding:        4px 14px !important;
  min-height:     0 !important;
  margin:         0 !important;
  line-height:    1.4 !important;
}


/* ── Stripe Card Element Input ─────────────────────────────── */

#card-element {
  margin:         4px 14px 0 !important;
  padding:        10px 11px !important;
  border:         1px solid rgba(0, 0, 0, 0.14) !important;
  border-radius:  var(--pm-radius-input) !important;
  background:     var(--pm-modal-bg) !important;
  transition:     border-color var(--pm-transition),
                  box-shadow var(--pm-transition) !important;
  box-sizing:     border-box !important;
}

#card-element.StripeElement--focus,
#card-element:focus-within {
  border-color:   var(--pm-stripe-accent) !important;
  box-shadow:     0 0 0 3px var(--pm-stripe-ring) !important;
}

#card-element.StripeElement--invalid {
  border-color:   var(--pm-error) !important;
  box-shadow:     0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

#card-errors {
  font-size:      12px !important;
  color:          var(--pm-error) !important;
  padding:        5px 14px 0 !important;
  min-height:     0 !important;
  margin:         0 !important;
  line-height:    1.4 !important;
}


/* ── "Pay With Card" Button ────────────────────────────────── */

#pto-submit-payment {
  display:        block !important;
  width:          calc(100% - 28px) !important;
  margin:         10px 14px 12px !important;
  padding:        11px 16px !important;
  background:     var(--pm-stripe-accent) !important;
  color:          #ffffff !important;
  font-family:    var(--pm-font) !important;
  font-size:      14px !important;
  font-weight:    600 !important;
  letter-spacing: 0.01em !important;
  text-align:     center !important;
  border:         none !important;
  border-radius:  var(--pm-radius-btn) !important;
  cursor:         pointer !important;
  box-shadow:     0 1px 3px rgba(99, 91, 255, 0.28) !important;
  transition:     background var(--pm-transition),
                  box-shadow var(--pm-transition),
                  transform var(--pm-transition) !important;
  box-sizing:     border-box !important;
}

#pto-submit-payment:hover {
  background:     var(--pm-stripe-hover) !important;
  box-shadow:     0 4px 14px rgba(99, 91, 255, 0.38) !important;
  transform:      translateY(-1px);
}

#pto-submit-payment:active {
  transform:      translateY(0) !important;
  box-shadow:     0 1px 3px rgba(99, 91, 255, 0.2) !important;
}

#pto-submit-payment:disabled {
  opacity:        0.55 !important;
  cursor:         not-allowed !important;
  transform:      none !important;
}

#pto-submit-saved-pm {
  display:        block !important;
  width:          100% !important;
  margin:         4px 0 6px !important;
  padding:        11px 16px !important;
  background:     var(--pm-stripe-accent) !important;
  color:          #ffffff !important;
  font-family:    var(--pm-font) !important;
  font-size:      14px !important;
  font-weight:    600 !important;
  letter-spacing: 0.01em !important;
  text-align:     center !important;
  border:         none !important;
  border-radius:  var(--pm-radius-btn) !important;
  cursor:         pointer !important;
  box-shadow:     0 1px 3px rgba(99, 91, 255, 0.28) !important;
  transition:     background var(--pm-transition),
                  box-shadow var(--pm-transition),
                  transform var(--pm-transition) !important;
  box-sizing:     border-box !important;
}

#pto-submit-saved-pm:hover {
  background:     var(--pm-stripe-hover) !important;
  box-shadow:     0 4px 14px rgba(99, 91, 255, 0.38) !important;
  transform:      translateY(-1px);
}

#pto-submit-saved-pm:disabled {
  opacity:        0.55 !important;
  cursor:         not-allowed !important;
  transform:      none !important;
}


/* ══════════════════════════════════════════════════════════════
   ACH — now inside the Stripe card as a sub-section
   JS moves #cqpim_payment_ach_container inside the Stripe li.
   ══════════════════════════════════════════════════════════════ */

#cqpim_payment_ach_container {
  padding:        0 0 14px !important;
  margin:         0 !important;
  background:     transparent !important;
  border:         none !important;
  box-sizing:     border-box !important;
}

/* Remove the standalone card styles that were on ACH in v3 */
#cqpim_payment_ach_container::before {
  display:        none !important;
}

#ach-errors {
  font-size:      12px !important;
  color:          var(--pm-error) !important;
  margin:         6px 14px 0 !important;
  min-height:     0 !important;
  line-height:    1.4 !important;
}

#ach-mandate-section {
  margin:         10px 14px 0 !important;
  padding-top:    10px !important;
  border-top:     1px solid var(--pm-divider) !important;
}

#ach-bank-details {
  font-size:      13px !important;
  font-weight:    600 !important;
  color:          var(--pm-text) !important;
  margin-bottom:  6px !important;
}

#ach-mandate-section > p {
  font-size:      11px !important;
  color:          var(--pm-text-muted) !important;
  line-height:    1.55 !important;
  margin-bottom:  10px !important;
  max-width:      100% !important;
}

#pto-submit-ach {
  display:        block !important;
  width:          calc(100% - 28px) !important;
  margin:         8px 14px 0 !important;
  padding:        10px 16px !important;
  background:     var(--pm-ach-accent) !important;
  color:          #ffffff !important;
  font-family:    var(--pm-font) !important;
  font-size:      14px !important;
  font-weight:    600 !important;
  letter-spacing: 0.01em !important;
  text-align:     center !important;
  border:         none !important;
  border-radius:  var(--pm-radius-btn) !important;
  cursor:         pointer !important;
  box-shadow:     0 1px 3px rgba(26, 86, 219, 0.22) !important;
  transition:     background var(--pm-transition),
                  box-shadow var(--pm-transition),
                  transform var(--pm-transition) !important;
  box-sizing:     border-box !important;
}

#pto-submit-ach:hover {
  background:     var(--pm-ach-hover) !important;
  box-shadow:     0 4px 12px rgba(26, 86, 219, 0.32) !important;
  transform:      translateY(-1px);
}

#pto-submit-ach:active {
  transform:      translateY(0) !important;
}

#pto-submit-ach:disabled {
  opacity:        0.55 !important;
  cursor:         not-allowed !important;
  transform:      none !important;
}

#pto-confirm-ach {
  display:        block !important;
  width:          100% !important;
  padding:        10px 16px !important;
  background:     var(--pm-ach-accent) !important;
  color:          #ffffff !important;
  font-family:    var(--pm-font) !important;
  font-size:      14px !important;
  font-weight:    600 !important;
  letter-spacing: 0.01em !important;
  text-align:     center !important;
  border:         none !important;
  border-radius:  var(--pm-radius-btn) !important;
  cursor:         pointer !important;
  box-shadow:     0 1px 3px rgba(26, 86, 219, 0.22) !important;
  transition:     background var(--pm-transition),
                  box-shadow var(--pm-transition),
                  transform var(--pm-transition) !important;
  box-sizing:     border-box !important;
}

#pto-confirm-ach:hover {
  background:     var(--pm-ach-hover) !important;
  box-shadow:     0 4px 12px rgba(26, 86, 219, 0.32) !important;
  transform:      translateY(-1px);
}

#pto-confirm-ach:disabled {
  opacity:        0.55 !important;
  cursor:         not-allowed !important;
  transform:      none !important;
}


/* ══════════════════════════════════════════════════════════════
   HIDDEN FORMS
   ══════════════════════════════════════════════════════════════ */

#pto-stripe-form,
#pto-ach-form {
  display:        none !important;
  margin:         0 !important;
  padding:        0 !important;
  border:         none !important;
}


/* ══════════════════════════════════════════════════════════════
   AMOUNT TO PAY (partial payments)
   ══════════════════════════════════════════════════════════════ */

#payment-amount {
  font-family:    var(--pm-font) !important;
  padding:        10px 14px !important;
  background:     var(--pm-modal-bg) !important;
  border-bottom:  1px solid var(--pm-divider) !important;
  font-size:      13px !important;
  color:          var(--pm-text) !important;
  display:        flex !important;
  align-items:    center !important;
  gap:            8px !important;
  flex-wrap:      wrap !important;
}

#payment-amount span {
  font-weight:    600 !important;
  font-size:      13px !important;
  color:          var(--pm-text) !important;
}

#amounttopay {
  padding:        5px 8px !important;
  border:         1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius:  var(--pm-radius-chip) !important;
  font-size:      13px !important;
  color:          var(--pm-text) !important;
  background:     var(--pm-modal-bg) !important;
  transition:     border-color var(--pm-transition),
                  box-shadow var(--pm-transition) !important;
  outline:        none !important;
  width:          90px !important;
}

#amounttopay:focus {
  border-color:   var(--pm-stripe-accent) !important;
  box-shadow:     0 0 0 3px rgba(99, 91, 255, 0.14) !important;
}

#saveamount {
  padding:        5px 10px !important;
  background:     var(--pm-stripe-accent) !important;
  color:          #ffffff !important;
  font-size:      12px !important;
  font-weight:    600 !important;
  border:         none !important;
  border-radius:  var(--pm-radius-chip) !important;
  cursor:         pointer !important;
  transition:     background var(--pm-transition) !important;
}

#saveamount:hover {
  background:     var(--pm-stripe-hover) !important;
}

#amountspinner {
  font-size:      12px !important;
  color:          var(--pm-text-muted) !important;
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 440px) {
  #cqpim_payment_methods {
    border-radius:  12px !important;
    min-width:      0 !important;
  }

  #cqpim_payment_methods > ul {
    padding:        10px !important;
    gap:            8px !important;
  }

  #pto-submit-payment,
  #pto-submit-ach {
    width:          calc(100% - 20px) !important;
    margin-left:    10px !important;
    margin-right:   10px !important;
  }

  #card-element {
    margin:         4px 10px 0 !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   SUBSCRIPTION PAYMENT MODAL
   Mirrors the invoice modal layout using the same design tokens.
   IDs are prefixed cqpim_sub_ to avoid collision with invoice.
   ══════════════════════════════════════════════════════════════ */

#cqpim_sub_payment_methods {
  font-family:      var(--pm-font) !important;
  background:       var(--pm-body-bg) !important;
  border-radius:    var(--pm-radius-modal) !important;
  padding:          0 !important;
  overflow:         hidden !important;
  min-width:        320px;
  max-width:        440px;
  width:            100%;
  box-sizing:       border-box;
  box-shadow:       0 20px 60px rgba(0,0,0,0.25) !important;
}

#cqpim_sub_payment_methods > h3 {
  font-family:      var(--pm-font) !important;
  font-size:        14px !important;
  font-weight:      600 !important;
  color:            var(--pm-text) !important;
  letter-spacing:   -0.01em;
  margin:           0 !important;
  padding:          16px 18px 14px !important;
  background:       var(--pm-modal-bg) !important;
  border-bottom:    1px solid var(--pm-divider) !important;
  line-height:      1.2 !important;
}

#cqpim_sub_payment_methods > ul {
  list-style:       none !important;
  margin:           0 !important;
  padding:          14px !important;
  display:          flex !important;
  flex-direction:   column !important;
  gap:              10px !important;
  background:       var(--pm-body-bg) !important;
  box-sizing:       border-box;
}

#cqpim_sub_payment_methods > ul > li {
  list-style:       none !important;
  margin:           0 !important;
  padding:          0 !important;
  border-radius:    var(--pm-radius-card) !important;
  overflow:         hidden !important;
  background:       var(--pm-card-bg) !important;
  border:           1px solid var(--pm-card-border) !important;
}

/* PayPal card within subscription modal */
#cqpim_sub_payment_methods > ul > li:has(form.paypal) {
  background:       var(--pm-paypal-surface) !important;
  border:           1px solid var(--pm-paypal-border) !important;
}

#cqpim_sub_payment_methods > ul > li:has(form.paypal)::before {
  content:          "PayPal";
  display:          block;
  font-size:        10px;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.08em;
  color:            var(--pm-paypal-label);
  opacity:          0.65;
  padding:          12px 14px 0;
}

#cqpim_sub_payment_methods > ul > li form.paypal {
  display:          flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  padding:          10px 14px 14px !important;
  margin:           0 !important;
}

#cqpim_sub_payment_methods > ul > li form.paypal input[type="image"] {
  max-width:        180px !important;
  height:           auto !important;
  display:          block !important;
  cursor:           pointer !important;
  border-radius:    6px;
  transition:       opacity var(--pm-transition), transform var(--pm-transition) !important;
}

#cqpim_sub_payment_methods > ul > li form.paypal input[type="image"]:hover {
  opacity:    0.92;
  transform:  translateY(-1px);
}

/* Stripe card within subscription modal */
#cqpim_sub_stripe_card::before {
  content:          "Stripe";
  display:          block;
  font-size:        10px;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.08em;
  color:            var(--pm-stripe-label);
  opacity:          0.75;
  padding:          12px 14px 0;
}

/* All buttons inside the subscription modal */
#cqpim_sub_payment_methods .cqpim_button {
  display:          block;
  width:            calc(100% - 28px) !important;
  margin:           10px 14px 12px !important;
  padding:          11px 16px !important;
  font-family:      var(--pm-font) !important;
  font-size:        14px !important;
  font-weight:      600 !important;
  letter-spacing:   0.01em !important;
  text-align:       center !important;
  border:           none !important;
  border-radius:    var(--pm-radius-btn) !important;
  cursor:           pointer !important;
  transition:       background var(--pm-transition),
                    box-shadow var(--pm-transition),
                    transform var(--pm-transition) !important;
  box-sizing:       border-box !important;
}

/* Stripe / activate button */
#cqpim_sub_payment_methods .cqpim_button.bg-violet,
#cqpim_sub_payment_methods .cqpim_button.bg-blue {
  background:       var(--pm-stripe-accent) !important;
  color:            #ffffff !important;
  box-shadow:       0 1px 3px rgba(99, 91, 255, 0.28) !important;
}

#cqpim_sub_payment_methods .cqpim_button.bg-violet:hover,
#cqpim_sub_payment_methods .cqpim_button.bg-blue:hover {
  background:       var(--pm-stripe-hover) !important;
  box-shadow:       0 4px 14px rgba(99, 91, 255, 0.38) !important;
  transform:        translateY(-1px);
}

/* Cancel / destructive button */
#cqpim_sub_payment_methods .cqpim_button.bg-red,
#cqpim_sub_payment_methods .cqpim_button.border-red,
#cqpim_sub_payment_methods .cqpim_button.font-red {
  background:       transparent !important;
  color:            var(--pm-error) !important;
  border:           1px solid var(--pm-remove-border) !important;
  box-shadow:       none !important;
}

#cqpim_sub_payment_methods .cqpim_button.bg-red:hover,
#cqpim_sub_payment_methods .cqpim_button.border-red:hover,
#cqpim_sub_payment_methods .cqpim_button.font-red:hover {
  background:       var(--pm-error-surface) !important;
  border-color:     var(--pm-error) !important;
  transform:        none !important;
}

/* Card element inside subscription modal */
#cqpim_sub_payment_methods #card-element {
  margin:           4px 14px 0 !important;
  padding:          10px 11px !important;
  border:           1px solid rgba(0,0,0,0.14) !important;
  border-radius:    var(--pm-radius-input) !important;
  background:       var(--pm-modal-bg) !important;
  transition:       border-color var(--pm-transition),
                    box-shadow var(--pm-transition) !important;
}

#cqpim_sub_payment_methods #card-element.StripeElement--focus {
  border-color:     var(--pm-stripe-accent) !important;
  box-shadow:       0 0 0 3px var(--pm-stripe-ring) !important;
}

/* ACH section inside subscription modal — same sub-section style */
#cqpim_sub_payment_methods #cqpim_payment_ach_container {
  padding:          0 0 6px !important;
  margin:           0 !important;
  background:       transparent !important;
  border:           none !important;
}

/* "or" divider inside subscription modal */
#cqpim_sub_payment_methods .pm-or-divider {
  margin:           4px 14px !important;
}

/* Trigger button on the subscription details block */
#cqpim_sub_pay_now {
  margin-top:       16px !important;
  width:            100% !important;
  padding:          11px 16px !important;
  font-size:        14px !important;
  font-weight:      600 !important;
}

@media (max-width: 440px) {
  #cqpim_sub_payment_methods {
    border-radius:  12px !important;
    margin:         10px !important;
    width:          calc(100% - 20px) !important;
  }
}