/* uzytak.com/<lang>/social-sizes-plugin/: live crop demo and size list. On top of photopack.css +
 * materials-plugin/plugin.css (mp- classes). Prefix ss-. */
.ss-demo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; margin-top: 26px; align-items: start; }
.ss-demo > * { min-width: 0; }
.ss-stage { position: relative; line-height: 0; border-radius: 14px; overflow: hidden; cursor: crosshair; background: #0b1533; box-shadow: 0 30px 60px -30px rgba(11, 21, 51, .55); outline-offset: 3px; }
.ss-stage img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.ss-dot { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(11, 21, 51, .55), inset 0 0 0 2px rgba(11, 21, 51, .35); pointer-events: none; transition: left .15s, top .15s; }
.ss-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #18b8b5; }
.ss-frame { position: absolute; border: 3px solid #18b8b5; box-shadow: 0 0 0 9999px rgba(11, 21, 51, .45); pointer-events: none; }
.ss-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.ss-tools .mp-small { margin: 0; flex: 1 1 220px; }
.ss-center, .ss-zip { font: inherit; font-size: 15px; font-weight: 700; padding: 10px 16px; border-radius: 10px; cursor: pointer; }
.ss-center { background: #fff; color: var(--pp-navy); border: 1px solid var(--pp-line); }
.ss-zip { background: var(--pp-blue); color: #fff; border: 0; }
.ss-zip:disabled { opacity: .55; cursor: progress; }
.ss-crops { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 14px; align-items: start; }
.ss-crop { margin: 0; min-width: 0; }
.ss-crop canvas { display: block; width: 100%; height: auto; border-radius: 8px; background: #e6eaf2; }
.ss-crop figcaption { display: flex; flex-direction: column; margin-top: 6px; font-size: 13px; line-height: 1.35; }
.ss-crop figcaption small { color: var(--pp-muted); font-size: 12px; }
.ss-demo.is-failed .ss-crops { display: none; }

.ss-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 18px; margin-top: 28px; }
.ss-groups ul { margin: 10px 0 0; padding: 0; list-style: none; }
.ss-groups li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--pp-line); font-size: 15px; }
.ss-groups li:last-child { border-bottom: 0; }
.ss-groups li span { color: var(--pp-muted); text-align: right; }
.ss-groups li b { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

.ss-pp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.ss-pp > div:first-child { flex: 1 1 420px; min-width: 0; }
.ss-pp .mp-cta { margin-top: 0; }

@media (max-width: 860px) {
  .ss-demo { grid-template-columns: minmax(0, 1fr); }
}