/** * Checkout dialog ([acc_join modal="1"]). * * Deliberately the same idiom as the theme's Post Oak issue modal — cream * dialog, dark green rule, blurred backdrop — so the site has one dialog * language rather than two. */ .acc-paymodal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-start; justify-content: center; padding: 1.5rem 1rem; overflow-y: auto; } .acc-paymodal[hidden] { display: none; } body.acc-paymodal-open { overflow: hidden; } /* theme.json puts `overflow: clip visible` on , so hiding body overflow alone leaves the page scrolling behind the dialog. */ html:has(body.acc-paymodal-open) { overflow: hidden; } .acc-paymodal__backdrop { position: fixed; inset: 0; background: rgba(13, 43, 18, 0.72); backdrop-filter: blur(3px); } .acc-paymodal__dialog { position: relative; width: min(560px, 100%); margin: auto; background: var(--wp--preset--color--background, #faf7f0); border: 1.5px solid #2c5e34; border-radius: 12px; padding: 2rem 1.5rem; box-shadow: 0 30px 80px -30px rgba(13, 43, 18, 0.7); } @media (min-width: 620px) { .acc-paymodal__dialog { padding: 2.5rem 2.75rem; } } .acc-paymodal__close { position: absolute; top: 0.35rem; right: 0.5rem; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; font-size: 1.8rem; line-height: 1; color: var(--wp--preset--color--muted, #6b7280); cursor: pointer; } .acc-paymodal__close:hover { color: var(--wp--preset--color--primary, #1a3a1f); } .acc-paymodal__head { margin-bottom: 1.5rem; text-align: center; } /* Reserve the close button's corner. It is 44px wide, absolutely positioned at the top right, and the title had no space set aside for it -- so any title that wrapped ran underneath the x. Symmetric here, unlike the other modals: this head is text-align:center, and padding on one side only would shift the title off center by half the reserve. */ .acc-paymodal__title { padding: 0 3rem; margin: 0 0 0.4rem; font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 500; line-height: 1.1; color: var(--wp--preset--color--primary, #1a3a1f); } .acc-paymodal__lede { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--wp--preset--color--muted, #5b5847); } /* The dialog supplies its own frame, so the form shouldn't bring another. */ .acc-paymodal .acc-pay { max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }