#nanpfund-payment-form { font-size: 0.9em; /* Utility: hidden elements */ .is-hidden { display: none !important; } /* Error message bar */ .payment-error { background: #fce8e8; border-left: 4px solid #ed0a0a; color: #c00; padding: 0.75em 1em; margin-bottom: 1em; font-weight: 500; } .form-section-heading { color: white; background-color: cornflowerblue; padding: 5px; font-weight: bold; } .field { background: #f7f7f7; @media (min-width: 700px) { display: grid; grid-template-columns: 260px 1fr; } .label-wrapper, .input-wrapper { padding: 1em 1.618em; } .label-wrapper { background: #f2f2f2; label { font-weight: 500; color: #686868; } .required { color: #ed0a0a; } } } /* Button row: Next + Reset */ .payment-form-actions { display: flex; align-items: center; gap: 0.75em; flex-wrap: wrap; } .payment-reset-btn { background: transparent; border: 1px solid #aaa; color: #555; cursor: pointer; font-size: 1em; padding: 0 1em; &:hover { background: #f0f0f0; border-color: #888; color: #333; } } /* "Make Another Payment" button shown below the receipt */ .payment-make-another { margin-top: 1em; } .payment-make-another-btn { background: #235787; border: none; color: white; cursor: pointer; font-size: 1em; padding: 0 1.25em; &:hover { box-shadow: inset 0 0 0 120px rgba(0,0,0,.18); } } /* Receipt shown after a successful payment */ .payment-success { padding: 1.5em; background: #e8f5e9; border-left: 4px solid #388e3c; color: #333; font-weight: normal; } .payment-receipt-heading { font-size: 1.2em; font-weight: 700; color: #1b5e20; margin: 0 0 0.25em; } .payment-receipt-subheading { color: #388e3c; font-size: 0.95em; margin: 0 0 1.25em; } .payment-receipt-section { border-top: 1px solid #c8e6c9; padding-top: 0.875em; margin-top: 0.875em; } .payment-receipt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: 0.375em; } .payment-receipt-label { color: #5a5a5a; font-size: 0.875em; flex-shrink: 0; } .payment-receipt-section-label { font-size: 0.875em; font-weight: 600; color: #444; margin-bottom: 0.375em; } .payment-receipt-value { font-weight: 500; color: #222; text-align: right; word-break: break-all; } .payment-receipt-amount { font-size: 1.15em; font-weight: 700; color: #1b5e20; } .payment-receipt-address { font-size: 0.9em; font-style: normal; line-height: 1.7; color: #333; } .payment-receipt-note { border-top: 1px solid #c8e6c9; margin-top: 0.875em; margin-bottom: 0; padding-top: 0.875em; font-size: 0.875em; font-style: italic; color: #555; } } /* Scroll lock applied to while modal is open (set via classList, not inline style, to avoid style-src CSP violations) */ body.payment-modal-open { overflow: hidden; } /* ------------------------------------------------------------------------- Payment lightbox modal Outside #nanpfund-payment-form so the fixed positioning isn't clipped by any transformed/overflow ancestor. ------------------------------------------------------------------------- */ .payment-modal { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; &.is-hidden { display: none !important; } } .payment-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); cursor: pointer; } .payment-modal-container { position: relative; z-index: 1; background: #fff; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); width: 90%; max-width: calc(100vw - 48px); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; @media (min-width: 1100px) { max-width: 1000px; } } .payment-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 0.875em 1.25em; border-bottom: 1px solid #e5e5e5; flex-shrink: 0; span { font-weight: 600; font-size: 1.5em; color: #333; } } .payment-modal-close { background-color: #235787 !important; border: none; cursor: pointer; font-size: 1.5em; line-height: 1.25 !important; color: white; padding: 0 0.75em !important; min-height: 35px !important; &:hover { box-shadow: inset 0 0 0 120px rgba(0,0,0,.18); } } .payment-modal-body { flex: 1; overflow: hidden; } .payment-modal-body, .authnet-iframe { max-height: calc(90vh - 83px); } .authnet-iframe { display: block; width: 100%; height: 650px; border: none; }