/* "Added to your cart" dialog (static/js/cart-modal.js) */
.cm-root { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; }
.cm-root[hidden] { display: none; }
body.cm-open { overflow: hidden; }
.cm-backdrop { position: absolute; inset: 0; background: rgba(20, 22, 30, .55); opacity: 0; transition: opacity .2s ease; }
.cm-dialog { position: relative; width: min(420px, 100%); padding: 28px 24px 22px; border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(18px) scale(.94); transition: opacity .2s ease, transform .28s cubic-bezier(.2, .9, .3, 1.2); outline: none; }
.cm-root.is-open .cm-backdrop { opacity: 1; }
.cm-root.is-open .cm-dialog { opacity: 1; transform: none; }
.cm-root.is-closing .cm-dialog { opacity: 0; transform: translateY(10px) scale(.97); transition-duration: .18s; }

/* the check draws itself */
.cm-check { width: 64px; height: 64px; margin: 0 auto 10px; }
.cm-check svg { width: 100%; height: 100%; }
.cm-ring { fill: var(--green, #1aa179); stroke: none; transform-origin: center; }
.cm-tick { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.cm-root.is-open .cm-ring { animation: cm-pop .45s cubic-bezier(.2, .9, .3, 1.4) both; }
.cm-root.is-open .cm-tick { animation: cm-draw .35s .22s ease-out forwards; }
@keyframes cm-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes cm-draw { to { stroke-dashoffset: 0; } }

.cm-title { margin: 0 0 14px; font-size: 1.35rem; font-weight: 800; }
.cm-item { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: var(--bg-soft, #f4f5f7); text-align: left; }
.cm-img { width: 64px; height: 64px; flex: none; object-fit: contain; border-radius: 10px; background: #fff; }
.cm-text { display: grid; gap: 2px; min-width: 0; }
.cm-name { overflow-wrap: anywhere; }
.cm-meta { color: var(--muted, #5b6270); font-size: .9rem; }
.cm-sum { margin: 14px 0 18px; font-weight: 600; }
.cm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cm-actions .btn { width: 100%; justify-content: center; }

@media (max-width: 420px) {
  .cm-actions { grid-template-columns: 1fr; }
  .cm-actions .btn-primary { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-backdrop, .cm-dialog { transition: none; }
  .cm-root.is-open .cm-ring, .cm-root.is-open .cm-tick { animation: none; }
  .cm-tick { stroke-dashoffset: 0; }
}