/* Native confirm. Replaces admin/Client/modal/front.css + its two server-rendered .jqmWindow divs (fixed 290x130 boxes with GIF/PNG icons). Logical properties throughout, so the one sheet serves RTL and LTR. */ #coiDlg{ border:0; padding:0; border-radius:14px; width:min(420px,calc(100vw - 2rem)); color:#1b2430; background:#fff; box-shadow:0 18px 48px -12px rgb(16 24 40/.34),0 2px 6px rgb(16 24 40/.08); font:inherit; /* the dialog is appended to , which on a store page may carry a product font-size */ font-size:1rem; } /* Not display:none - the dialog must stay in the a11y tree only while open, which the UA already handles; this is purely the entrance animation. allow-discrete + the ::backdrop transition are what let a display-toggled element animate at all. */ #coiDlg{ opacity:0; translate:0 -8px; transition:opacity .18s ease,translate .18s ease,overlay .18s allow-discrete,display .18s allow-discrete; } #coiDlg[open]{opacity:1;translate:0 0} @starting-style{ #coiDlg[open]{opacity:0;translate:0 -8px} } #coiDlg::backdrop{ background:rgb(12 18 28/.5); backdrop-filter:blur(2px); opacity:0; transition:opacity .18s ease,overlay .18s allow-discrete,display .18s allow-discrete; } #coiDlg[open]::backdrop{opacity:1} @starting-style{ #coiDlg[open]::backdrop{opacity:0} } #coiDlg .coiDlgIn{ display:grid; grid-template-columns:auto 1fr; gap:2px 14px; padding:26px 26px 20px; } .coiDlgIcn{ grid-row:1/3; width:34px; height:34px; color:#1370df; margin-block-start:2px; } .coiDlgAlert .coiDlgIcn{color:#e0952a} #coiDlgTtl{ margin:0; font-size:1.15rem; font-weight:600; line-height:1.35; align-self:center; } #coiDlgMsg{ margin:6px 0 0; color:#4a5567; line-height:1.55; overflow-wrap:anywhere; /* pre-line, because the message is set with textContent and some callers embed \n (client/JS/basket.js:663 builds a two-line stock warning that way). */ white-space:pre-line; } #coiDlg menu{ grid-column:1/-1; display:flex; justify-content:flex-end; gap:10px; margin:22px 0 0; padding:0; list-style:none; } .coiDlgBtn{ font:inherit; font-weight:600; cursor:pointer; border-radius:8px; padding:9px 20px; min-width:96px; border:1px solid transparent; transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease; } .coiDlgBtn:focus-visible{outline:2px solid #1370df;outline-offset:2px} .coiDlgNo{background:#fff;border-color:#cbd2dc;color:#33405a} .coiDlgNo:hover{background:#f2f4f7;border-color:#aab4c2} .coiDlgYes{background:#1370df;color:#fff} .coiDlgYes:hover{background:#0f5fbd} .coiDlgAlert .coiDlgYes{background:#e0952a} .coiDlgAlert .coiDlgYes:hover{background:#c8801d} @media (max-width:479px){ #coiDlg .coiDlgIn{padding:22px 20px 18px} #coiDlg menu{flex-direction:column-reverse} .coiDlgBtn{width:100%} } /* The dialog is a modal overlay; a motion-reduced user still needs it to appear, just not slide. */ @media (prefers-reduced-motion:reduce){ #coiDlg,#coiDlg::backdrop{transition-duration:.01ms} #coiDlg{translate:none} }