/* -------------------------------------------------------------------------- Modal (wpsubs-modal) Centered dialog over a dimmed backdrop. Toggle visibility with the [hidden] attribute (or remove it to show). Behaviour (open/close) is wired per page. -------------------------------------------------------------------------- */ .wpsubs-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; } .wpsubs-modal[hidden] { display: none; } /* Contained: the overlay stops at this plugin's screen instead of covering WordPress. Insets mirror #wpcontent's own margins so the admin bar and the admin menu stay usable behind a feature lock. */ .wpsubs-modal--contained { top: var(--wp-admin--admin-bar--height, 32px); left: 160px; } .folded .wpsubs-modal--contained { left: 36px; } @media screen and (max-width: 960px) { .auto-fold .wpsubs-modal--contained { left: 36px; } } @media screen and (max-width: 782px) { .wpsubs-modal--contained, .auto-fold .wpsubs-modal--contained { left: 0; } } .wpsubs-modal__backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.5); } .wpsubs-modal__dialog { position: relative; display: flex; flex-direction: column; width: min(640px, calc(100vw - 40px)); max-height: calc(100vh - 80px); background: var(--wpsubs-surface); border-radius: var(--wpsubs-radius); box-shadow: var(--wpsubs-shadow-md); } .wpsubs-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--wpsubs-border); } .wpsubs-modal__title { margin: 0 0 8px; padding: 0; font-size: 14px; font-weight: 600; color: var(--wpsubs-text); } .wpsubs-modal__close { background: none; border: none; padding: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--wpsubs-text-muted); transition: color 0.12s; } .wpsubs-modal__close:hover { color: var(--wpsubs-text); } .wpsubs-modal__body { padding: 18px; overflow-y: auto; } .wpsubs-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--wpsubs-border); }