/* Embroidery SaaS — customizer modal + button styles. Deliberately framework-agnostic so it works on Storefront, Astra, Blocksy, and the WC block-based cart/product templates without theme-specific selectors. */ .embroidery-saas-customizer { margin: 0 0 16px; } .embroidery-saas-cta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .embroidery-saas-open { /* Inherit theme button styling via .button; just nudge the visual weight. */ font-weight: 600; } .embroidery-saas-summary { font-size: 13px; color: #2c6b3a; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 4px; padding: 4px 8px; } .embroidery-saas-error { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 4px; padding: 8px 12px; margin: 0 0 12px; } /* Modal — fixed, full-viewport overlay. The customizer.js portals this element to on load so it escapes any ancestor stacking context (sticky headers, Elementor sections with transforms, etc.) that would otherwise trap the overlay beneath the theme header regardless of z-index. The z-index is set near the 32-bit signed max so it also sits above the WordPress admin bar (#wpadminbar, z-index 99999-100000) and any sticky promo bar. */ .embroidery-saas-modal[hidden] { display: none !important; } .embroidery-saas-modal { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: stretch; justify-content: center; } .embroidery-saas-modal-backdrop { position: absolute; inset: 0; z-index: 1; background: rgba(15, 23, 42, 0.78); } .embroidery-saas-modal-dialog { position: relative; z-index: 2; width: min(1200px, 96vw); height: 96vh; margin: auto; background: #0b1220; border-radius: 8px; overflow: hidden; box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.6); } .embroidery-saas-modal-iframe { width: 100%; height: 100%; border: 0; background: #0b1220; } .embroidery-saas-modal-close { position: absolute; z-index: 3; top: 10px; right: 12px; width: 36px; height: 36px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(15, 23, 42, 0.85); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; } /* Lock page scroll while the modal is open so the iframe owns wheel events. */ html.embroidery-saas-modal-open { overflow: hidden; }