/* Scope list styling to embedded section */ .wpjmap-email-triggers .wpjmue-triggers-head { margin-bottom: 14px; } .wpjmap-email-triggers #wpjmue-triggers-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; } /* Row layout like your “correct” screenshot */ .wpjmap-email-triggers .wpjmue-trigger-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 23px 16px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; margin-bottom: 10px; box-shadow: var(--wpjmap-shadow-sm); } .wpjmap-email-triggers .wpjmue-trigger-left { min-width: 0; } .wpjmap-email-triggers .wpjmue-trigger-title { font-weight: 700; font-size: 15px; line-height: 1.2; } .wpjmap-email-triggers .wpjmue-trigger-sub { margin-top: 4px; font-size: 12px; opacity: 0.75; } .wpjmap-email-triggers .wpjmue-trigger-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Ensure the Edit button doesn’t get wrecked by theme styles */ .wpjmap-email-triggers .wpjmue-btn { border-radius: 16px; background: #fff; padding: 8px 12px; border: 1px solid var(--wpjmap-todo-border); } /* Toggle (Activate) — slider style */ .wpjmap-email-triggers .wpjmue-toggle-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; } .wpjmap-email-triggers .wpjmue-toggle-label { opacity: .8; } .wpjmap-email-triggers .wpjmue-toggle { position: relative; width: 42px; height: 22px; display: inline-block; } .wpjmap-email-triggers .wpjmue-toggle input { opacity: 0; width: 0; height: 0; } .wpjmap-email-triggers .wpjmue-toggle-slider { position: absolute; inset: 0; background-color: #ccc; border-radius: 22px; cursor: pointer; transition: background-color .25s ease; } .wpjmap-email-triggers .wpjmue-toggle-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .25s ease; } .wpjmap-email-triggers .wpjmue-toggle input:checked + .wpjmue-toggle-slider { background-color: #22c55e; } .wpjmap-email-triggers .wpjmue-toggle input:checked + .wpjmue-toggle-slider::before { transform: translateX(20px); } .wpjmap-email-triggers .wpjmue-toggle input:focus + .wpjmue-toggle-slider { box-shadow: 0 0 0 2px rgba(34,197,94,.35); } /* ========================================================= IMPORTANT: Hide the inline WPJMUE modal markup in the embed so it doesn't appear at the bottom of the triggers list. JS will move it to when opening. ========================================================= */ .wpjmap-email-triggers #wpjmue-trigger-modal { display: none !important; } /* =========================== MODAL (IMPORTANT FIX) The modal is moved to , so we enable styling via body class =========================== */ body.wpjmue-embed-active #wpjmue-trigger-modal { display: none; } body.wpjmue-embed-active #wpjmue-trigger-modal.is-open, body.wpjmue-embed-active #wpjmue-trigger-modal[aria-hidden="false"] { display: block; position: fixed; inset: 0; z-index: 999999; } /* Backdrop variants */ body.wpjmue-embed-active #wpjmue-trigger-modal .wpjmue-modal-backdrop, body.wpjmue-embed-active #wpjmue-trigger-modal .wpjmue-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); } /* Dialog/container variants */ body.wpjmue-embed-active #wpjmue-trigger-modal .wpjmue-modal-dialog, body.wpjmue-embed-active #wpjmue-trigger-modal .wpjmue-modal__dialog { position: relative; width: min(980px, calc(100vw - 40px)); max-height: calc(100vh - 60px); overflow: auto; margin: 30px auto; background: #fff; border-radius: 18px; padding: 30px; box-shadow: 0 30px 80px rgba(0,0,0,0.25); } /* Make close buttons clickable even if theme overrides */ body.wpjmue-embed-active #wpjmue-trigger-modal .wpjmue-trigger-close, body.wpjmue-embed-active #wpjmue-trigger-modal [data-close="1"] { cursor: pointer; } body.wpjmue-embed-active #wpjmue-trigger-modal .wpjmue-insert-image, body.wpjmue-embed-active #wpjmue-trigger-modal [data-insert-image="1"]{ display:inline-flex !important; } /* Force our custom upload-image row to always be visible inside the trigger modal */ body.wpjmue-embed-active #wpjmue-trigger-modal #wpjmue-upload-image-row { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 10px !important; visibility: visible !important; opacity: 1 !important; } body.wpjmue-embed-active #wpjmue-trigger-modal #wpjmue-upload-image-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 8px 10px !important; border-radius: 10px !important; border: 1px solid #ddd !important; background: #fff !important; cursor: pointer !important; line-height: 1 !important; } body.wpjmue-embed-active #wpjmue-trigger-modal #wpjmue-upload-image-status { display: inline-block !important; font-size: 11px !important; opacity: .7 !important; } .wpjmue-token { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 8px; } #wpjmue-trigger-clear-document { background: #f7f7f7; padding: 10px; border-radius: 10px; } .wpjmue-trigger-sub { display: flex; align-items: center; gap: 10px; font-size: 13px; } .wpjmue-trigger-key { opacity: 0.75; } .wpjmue-trigger-template { padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; } .wpjmue-trigger-template.saved { background: #e6f7ed; color: #157347; } .wpjmue-trigger-template.empty { background: #f1f3f5; color: #6c757d; } .wpjmue-trigger-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; row-gap: 8px; } .wpjmue-trigger-left { grid-column: 1 / -1; } .wpjmue-trigger-right { grid-column: 1 / -1; display: flex; gap: 12px; } .wpjmue-trigger-key { display: none; } .wpjmue-trigger-template { margin-left: 125px; } .wpjmue-trigger-title { padding-top: 12px; position: absolute; margin-left: 10px; } .wpjmue-trigger-row { height: 100px; }