/* Ingangspopup over het hele scherm (18+ en postcode), in de Shop-stijl (tokens in shop-style.css). */
html.ssg-open, html.ssg-open body { overflow: hidden; }
.ssg { position: fixed; inset: 0; z-index: 2147483000; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 20px 16px;
  background: var(--ss-canvas); font-family: var(--ss-font); letter-spacing: -.02em; color: var(--ss-ink); -webkit-font-smoothing: antialiased; }
.ssg-card { width: 100%; max-width: 460px; background: var(--ss-surface); border-radius: var(--ss-radius-card); padding: 28px 24px 24px; text-align: center; box-shadow: var(--ss-shadow-lg); }
.ssg-logo { width: 96px; height: 96px; object-fit: contain; display: block; margin: -6px auto 6px; }
.ssg-step + .ssg-step { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--ss-line); transition: opacity .2s; }
.ssg-step.off { opacity: .4; }
.ssg h2 { font: 600 24px/1.2 var(--ss-font); letter-spacing: -.045em; margin: 0 0 6px; }
.ssg h3 { font: 600 19px/1.25 var(--ss-font); letter-spacing: -.04em; margin: 0 0 6px; }
.ssg p { color: var(--ss-muted); font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.ssg-row { display: flex; gap: 10px; }
.ssg-row .ssg-btn { flex: 1; }
.ssg-btn { font: 500 16px var(--ss-font); letter-spacing: -.02em; border: 0; border-radius: 9999px; padding: 13px 18px; cursor: pointer;
  background: var(--ss-violet); color: #fff; box-shadow: var(--ss-shadow-violet); }
.ssg-btn:hover { background: var(--ss-violet-dark); }
.ssg-btn:disabled { background: var(--ss-stone); box-shadow: none; cursor: not-allowed; }
.ssg-btn.ghost { background: var(--ss-surface); color: var(--ss-ink); border: 1px solid var(--ss-line); box-shadow: var(--ss-shadow-sm); }
.ssg-btn.ghost.sel { border-color: var(--ss-ink); }
.ssg-btn.ok { background: var(--ss-ink); box-shadow: none; }
.ssg-pc { display: flex; gap: 6px; background: var(--ss-surface); border: 1px solid rgba(5, 41, 77, .12); border-radius: 9999px; padding: 4px; }
.ssg-pc:focus-within { border-color: var(--ss-violet); }
.ssg-pc input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--ss-ink); font: 400 16px var(--ss-font); padding: 8px 14px; text-transform: uppercase; }
.ssg-pc input::placeholder { text-transform: none; }
.ssg-pc .ssg-btn { padding: 10px 18px; }
.ssg-err { color: var(--ss-err) !important; margin: 10px 0 0 !important; }