/* Inline product demo player (see static/js/cm-inline-demo.js) */
.cm-demo { --cm-demo-ratio: 16 / 9; width: 100%; }
.cm-demo-frame { position: relative; width: 100%; aspect-ratio: var(--cm-demo-ratio); border-radius: 18px; overflow: hidden; background: #111111; box-shadow: 0 6px 20px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06); }
.cm-demo-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-demo-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0; background: #4DB7FF; color: #111111; font: 600 16px/1 "Inter", sans-serif; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.cm-demo-start[hidden] { display: none; }
.cm-demo-controls { display: flex; justify-content: flex-end; margin-top: 10px; }
.cm-demo-play { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid #E5E9EE; background: #FFFFFF; color: #5B6470; font: 600 13px/1 "Inter", sans-serif; cursor: pointer; }
.cm-demo-play:hover { color: #111111; border-color: #C9D1DA; }
.cm-demo-play svg { display: none; }
.cm-demo-play[data-state="pause"] .i-pause, .cm-demo-play[data-state="play"] .i-play, .cm-demo-play[data-state="replay"] .i-replay { display: block; }
.cm-demo-play[data-state="replay"] { background: #111111; border-color: #111111; color: #FFFFFF; }
.cm-demo-start:focus-visible, .cm-demo-play:focus-visible { outline: 3px solid #4DB7FF; outline-offset: 2px; }