/* stomerij-ophalen: block-port van ReactBitsPro Blocks/cta-3 (Tailwind naar gescopete CSS), met de
   gedeelde boekingsdemo in #ophaalmoment. Kleuren via --m-*. */
.msm-stomerij-ophalen {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 116px 16px 80px;
  background: var(--m-bg, #eef3f1);
  color: var(--m-ink, #1a3339);
  font-family: var(--m-font-body, 'Source Sans 3', Arial, sans-serif);
  scroll-margin-top: 112px;
}
.msm-stomerij-ophalen *,
.msm-stomerij-ophalen *::before,
.msm-stomerij-ophalen *::after { box-sizing: border-box; }
.msm-stomerij-ophalen .so-wrap { width: 100%; max-width: 1400px; margin: 0 auto; }
.msm-stomerij-ophalen .so-col { max-width: 48rem; margin: 0 auto; text-align: center; }

/* Vlak met de drie tegels en de draaiende cirkels (sm:h-40) */
.msm-stomerij-ophalen .so-stage { position: relative; height: 160px; margin-bottom: 16px; }
.msm-stomerij-ophalen .so-rings {
  position: absolute;
  top: -96px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.msm-stomerij-ophalen .so-rings-box { position: relative; width: 260px; height: 260px; }
.msm-stomerij-ophalen .so-rings-svg { display: block; width: 100%; height: 100%; opacity: 0.3; }
.msm-stomerij-ophalen .so-ring-in,
.msm-stomerij-ophalen .so-ring { transform-box: fill-box; transform-origin: center; }
.msm-stomerij-ophalen .so-ring {
  stroke: var(--m-accent2, #244a55);
  animation: so-spin 20s linear infinite;
  animation-play-state: paused;
}
.msm-stomerij-ophalen .so-ring--2 { animation-duration: 15s; animation-direction: reverse; }
.msm-stomerij-ophalen .so-ring--3 { animation-duration: 25s; }
.msm-stomerij-ophalen.so-spin-on .so-ring { animation-play-state: running; }
.msm-stomerij-ophalen.so-spin-on.so-paused .so-ring { animation-play-state: paused; }
@keyframes so-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.msm-stomerij-ophalen .so-rings-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 30%, color-mix(in srgb, var(--m-bg, #eef3f1) 50%, transparent) 60%, var(--m-bg, #eef3f1) 100%);
}

.msm-stomerij-ophalen .so-slot { position: absolute; }
.msm-stomerij-ophalen .so-slot--main { z-index: 10; top: 0; left: calc(50% - 80px); width: 160px; height: 160px; }
.msm-stomerij-ophalen .so-slot--left,
.msm-stomerij-ophalen .so-slot--right { z-index: 0; top: 16px; width: 112px; height: 112px; }
.msm-stomerij-ophalen .so-slot--left { left: calc(50% - 84px - 56px); }
.msm-stomerij-ophalen .so-slot--right { left: calc(50% + 84px - 56px); }
.msm-stomerij-ophalen .so-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--m-muted, #63767b) 22%, transparent);
  border-radius: 24px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.msm-stomerij-ophalen .so-tile--side {
  padding: 6px;
  background: color-mix(in srgb, var(--m-line, #d3dfdb) 50%, transparent);
  transform: scale(0.9);
}
.msm-stomerij-ophalen .so-tile--main {
  padding: 8px;
  background: color-mix(in srgb, var(--m-line, #d3dfdb) 70%, transparent);
}
.msm-stomerij-ophalen .so-tile img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Kop, alinea en knop */
.msm-stomerij-ophalen .so-title {
  margin: 0 0 24px;
  font-family: var(--m-font-display, 'Instrument Sans', Arial, sans-serif);
  font-size: 30px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--m-ink, #1a3339);
}
.msm-stomerij-ophalen .so-intro {
  max-width: 32rem;
  margin: 0 auto 32px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--m-muted, #63767b);
}
.msm-stomerij-ophalen .so-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 16px 32px;
  border-radius: 999px;
  background: var(--m-ink, #1a3339);
  color: var(--m-surface, #f8fbfa);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.msm-stomerij-ophalen .so-cta:hover { background: color-mix(in srgb, var(--m-ink, #1a3339) 86%, var(--m-surface, #f8fbfa)); transform: scale(1.05); }
.msm-stomerij-ophalen .so-cta:focus-visible { outline: 2px solid var(--m-accent2, #244a55); outline-offset: 3px; }

/* Drie korte regels met een betekenisvol icoon */
.msm-stomerij-ophalen .so-points {
  display: grid;
  gap: 12px;
  max-width: 44rem;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.msm-stomerij-ophalen .so-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--m-ink, #1a3339);
}
.msm-stomerij-ophalen .so-point-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--m-line, #d3dfdb);
  border-radius: 12px;
  background: var(--m-surface, #f8fbfa);
  color: var(--m-accent2, #244a55);
}
.msm-stomerij-ophalen .so-points li > span:last-child { padding-top: 9px; }

/* Boekingsvak #ophaalmoment */
.msm-stomerij-ophalen .so-booking {
  max-width: 860px;
  margin: 56px auto 0;
  padding: 24px 16px;
  border: 1px solid var(--m-line, #d3dfdb);
  border-radius: 24px;
  background: var(--m-surface, #f8fbfa);
  scroll-margin-top: 112px;
}
.msm-stomerij-ophalen .so-booking:focus { outline: none; }
.msm-stomerij-ophalen .so-booking:focus-visible { outline: 2px solid var(--m-accent2, #244a55); outline-offset: 4px; }

@media (min-width: 640px) {
  .msm-stomerij-ophalen { padding: 140px 24px 96px; }
  .msm-stomerij-ophalen .so-rings-box { width: 310px; height: 310px; }
  .msm-stomerij-ophalen .so-slot--left { left: calc(50% - 114px - 56px); }
  .msm-stomerij-ophalen .so-slot--right { left: calc(50% + 114px - 56px); }
  .msm-stomerij-ophalen .so-title { margin-bottom: 32px; font-size: 36px; }
  .msm-stomerij-ophalen .so-intro { margin-bottom: 40px; }
  .msm-stomerij-ophalen .so-cta { padding: 16px 40px; font-size: 18px; }
  .msm-stomerij-ophalen .so-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .msm-stomerij-ophalen .so-points li { flex-direction: column; gap: 10px; }
  .msm-stomerij-ophalen .so-points li > span:last-child { padding-top: 0; }
  .msm-stomerij-ophalen .so-booking { padding: 36px; }
}
@media (min-width: 768px) {
  .msm-stomerij-ophalen .so-title { font-size: 48px; }
}
@media (min-width: 1024px) {
  .msm-stomerij-ophalen { padding: 148px 32px 112px; }
  .msm-stomerij-ophalen .so-title { font-size: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-stomerij-ophalen .so-ring { animation: none; }
  .msm-stomerij-ophalen .so-cta { transition: none; }
  .msm-stomerij-ophalen .so-cta:hover { transform: none; }
}