/** * Styled confirmation dialog — replaces the native browser confirm() for * destructive actions (clear cart, clear quote, remove a quote line). * * Self-contained with colour fallbacks: like the notices, it is injected at * the end of , which may sit outside the plugin's .tsd scope. * * @package TSD_Order_Quote */ .tsd-confirm-scrim { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(4, 10, 18, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .15s ease; } .tsd-confirm-scrim.is-open { opacity: 1; } .tsd-confirm { width: 400px; max-width: 100%; background: var(--tsd-paper, #0E2135); border: 1px solid var(--tsd-line, #1E3247); border-radius: var(--tsd-radius, 14px); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); padding: 26px 26px 22px; text-align: center; transform: translateY(8px) scale(.98); transition: transform .15s ease; font-family: var(--tsd-font-b, 'Inter', sans-serif); } .tsd-confirm-scrim.is-open .tsd-confirm { transform: translateY(0) scale(1); } .tsd-confirm .tsd-confirm__ic { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 107, 90, .14) !important; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--tsd-danger, #ff6b5a) !important; } .tsd-confirm .tsd-confirm__ic svg { width: 26px; height: 26px; stroke: var(--tsd-danger, #ff6b5a) !important; } .tsd-confirm__title { font-family: var(--tsd-font-d, 'Rajdhani', sans-serif); font-weight: 700; font-size: 21px; color: #fff; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 8px; } .tsd-confirm__msg { font-size: 14.5px; color: var(--tsd-muted, #D4DBE4); line-height: 1.5; margin: 0 0 22px; } .tsd-confirm__actions { display: flex; gap: 11px; } /* Layout only — Cancel uses the hardened .tsd-btn-outline class, so its colours are already locked against the theme. Only the solid-red danger button needs bespoke colour (no solid-danger class exists), locked the same way the standard button classes are. */ .tsd-confirm .tsd-confirm__btn.tsd-confirm__btn { flex: 1; height: 48px; min-height: 0; font-size: 15px !important; } /* Danger — solid red, locked on every state so the theme cannot bleed in. */ .tsd-confirm .tsd-confirm__btn--danger.tsd-confirm__btn--danger, .tsd-confirm .tsd-confirm__btn--danger.tsd-confirm__btn--danger:focus, .tsd-confirm .tsd-confirm__btn--danger.tsd-confirm__btn--danger:active { background: var(--tsd-danger, #ff6b5a) !important; color: #fff !important; border: 1px solid transparent !important; box-shadow: none !important; } .tsd-confirm .tsd-confirm__btn--danger.tsd-confirm__btn--danger:hover { background: #ff5544 !important; color: #fff !important; border-color: transparent !important; }