Payment Modal Styling

The InfusedWoo Keap payment modal consists of two parts:

1. Modal wrapper (header, order summary, buttons) — styled by InfusedWoo, fully customizable via CSS
2. Payment form fields (card number, expiry, CVV) — rendered by Keap’s secure JavaScript component, which may use an iframe

Theme Conflicts

Some WordPress themes apply aggressive global CSS rules to inputs, buttons, and modals. When this happens, the payment modal may appear with missing borders, low-contrast fields, or broken layout. This is a theme styling conflict, not an InfusedWoo bug.

To fix it, add targeted CSS overrides scoped to the .iw-keap-modal class via Appearance > Customize > Additional CSS or your theme’s stylesheet.

CSS Selectors Reference

All InfusedWoo modal classes are prefixed with iw-keap- to avoid conflicts.

Modal Structure

Selector	Description
.iw-keap-modal-overlay	Full-screen backdrop (dark overlay with blur)
.iw-keap-modal	Modal container (white box)
.iw-keap-modal-header	Header area (title + close button)
.iw-keap-modal-title	”Secure Payment” heading
.iw-keap-modal-close	Close (×) button
.iw-keap-modal-body	Main content area
.iw-keap-modal-footer	Footer with action buttons

Order Summary

Selector	Description
.iw-keap-order-summary	Summary container (grey box)
.iw-keap-order-total	Total amount row
.iw-keap-order-email	Customer email row

Buttons

Selector	Description
.iw-keap-btn-pay	”Complete Payment” button (green)
.iw-keap-btn-cancel	”Cancel” button
.iw-keap-pay-button	Checkout page “Pay with Keap” button

States

Selector	Description
.iw-keap-loading	Loading spinner container
.iw-keap-loading-spinner	Animated spinner
.iw-keap-error	Error message container
.iw-keap-error.active	Visible error message
.iw-keap-payment-ready	”Payment method saved” confirmation

Payment Form

Selector	Description
.iw-keap-payment-form	Container for Keap’s payment fields
.iw-keap-payment-form keap-payment-method	Keap’s web component element

Common Customizations

Fix Low-Contrast Input Fields

If your theme’s global styles override the payment form inputs (missing borders, white text on white background, etc.):

.iw-keap-modal input,
.iw-keap-modal select {
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
    background: #ffffff !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
}

.iw-keap-modal input:focus,
.iw-keap-modal select:focus {
    border-color: #10b981 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

.iw-keap-modal input::placeholder {
    color: #9ca3af !important;
}

Change Button Color

.iw-keap-btn-pay {
    background: #4f46e5; /* Example: indigo */
}

.iw-keap-btn-pay:hover {
    background: #4338ca;
}

.iw-keap-pay-button {
    background: #4f46e5;
}

.iw-keap-pay-button:hover:not(:disabled) {
    background: #4338ca;
}

Change Modal Width

.iw-keap-modal {
    max-width: 600px; /* Default is 500px */
}

Dark Theme Modal

.iw-keap-modal {
    background: #1f2937;
    color: #f9fafb;
}

.iw-keap-modal-header {
    background: linear-gradient(to bottom, #1f2937, #111827);
    border-bottom-color: #374151;
}

.iw-keap-modal-title {
    color: #f9fafb;
}

.iw-keap-order-summary {
    background: #111827;
    border-color: #374151;
}

.iw-keap-order-total {
    color: #f9fafb;
}

.iw-keap-modal-footer {
    background: #111827;
    border-top-color: #374151;
}

.iw-keap-modal input,
.iw-keap-modal select {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

Important Notes

• The card number, expiry, and CVV fields are rendered by Keap’s hosted payment JavaScript and may be inside an iframe. Iframe content cannot be styled from your site’s CSS.
• If Keap’s fields appear unstyled or low-contrast and the CSS above does not help, the issue is within Keap’s payment component — contact Keap support for hosted field styling options.
• InfusedWoo’s modal CSS is loaded from keap-payment-modal.css and uses !important sparingly to avoid theme conflicts. If your theme uses aggressive !important rules, you may need to match specificity.