/* fietsenwinkel-route 1.0.0 · zin met keuzechips naar ReactBits GlideSelect, kilometers naar CountUp.
   Eigen vanilla CSS; kleuren en fonts alleen via --m-*-tokens, tinten met color-mix. */
.msm-fietsenwinkel-route {
  --rt-ink: var(--m-ink, #163a32);
  --rt-bg: var(--m-bg, #eee9df);
  --rt-hot: var(--m-primary, #ff5f45);
  --rt-lime: var(--m-surface, #dce9bd);
  --rt-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --rt-row: 44px;
  display: block;
  scroll-margin-top: 110px;
  padding: clamp(72px, 9vw, 128px) 4vw;
  background: var(--rt-lime);
  color: var(--rt-ink);
  font: 400 16px/1.55 var(--m-font-body, Arial, Helvetica, sans-serif);
}
.msm-fietsenwinkel-route *,
.msm-fietsenwinkel-route *::before,
.msm-fietsenwinkel-route *::after { box-sizing: border-box; }
.msm-fietsenwinkel-route .rt-inner { max-width: 1240px; margin: 0 auto; }
.msm-fietsenwinkel-route .rt-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 18px 6vw;
  align-items: end;
}
.msm-fietsenwinkel-route .rt-eyebrow,
.msm-fietsenwinkel-route .rt-label {
  margin: 0 0 18px;
  font: 700 10px/1.2 var(--m-font-body, Arial, Helvetica, sans-serif);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.msm-fietsenwinkel-route .rt-eyebrow { grid-column: 1 / -1; margin: 0; }
.msm-fietsenwinkel-route h2 {
  margin: 0;
  max-width: 12ch;
  font: 500 clamp(46px, 6.6vw, 96px)/0.88 var(--m-font-display, Georgia, "Times New Roman", serif);
  letter-spacing: -0.055em;
}
.msm-fietsenwinkel-route .rt-lede { margin: 0; max-width: 40ch; font-size: 17px; }

/* De zin met drie keuzechips. */
.msm-fietsenwinkel-route .rt-zin {
  margin: clamp(36px, 5vw, 64px) 0 0;
  padding: clamp(26px, 3vw, 40px) 0;
  border-top: 1px solid var(--rt-ink);
  border-bottom: 1px solid var(--rt-ink);
  font: 400 clamp(26px, 3.4vw, 48px)/1.5 var(--m-font-display, Georgia, "Times New Roman", serif);
  letter-spacing: -0.02em;
}
.msm-fietsenwinkel-route .rt-select { position: relative; display: inline-block; vertical-align: baseline; }
.msm-fietsenwinkel-route .rt-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  margin: 0.06em 0;
  padding: 0.04em 0.42em 0.08em 0.5em;
  border: 0;
  border-radius: 999px;
  background: var(--rt-ink);
  color: var(--rt-lime);
  font: italic 400 1em/1.15 var(--m-font-display, Georgia, "Times New Roman", serif);
  letter-spacing: -0.02em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.1s ease, transform 0.16s var(--rt-ease);
}
.msm-fietsenwinkel-route .rt-chip:hover,
.msm-fietsenwinkel-route .rt-chip[aria-expanded="true"] { background: color-mix(in srgb, var(--rt-ink) 82%, var(--rt-hot)); }
.msm-fietsenwinkel-route .rt-chip:active { transform: scale(0.97); }
.msm-fietsenwinkel-route .rt-chip:focus-visible { outline: 3px solid var(--rt-hot); outline-offset: 3px; }
.msm-fietsenwinkel-route .rt-chev { flex: none; width: 0.42em; height: 0.42em; color: var(--rt-hot); transition: transform 0.2s var(--rt-ease); }
.msm-fietsenwinkel-route .rt-chip[aria-expanded="true"] .rt-chev { transform: rotate(180deg); }
.msm-fietsenwinkel-route .rt-select[data-swap] .rt-val { animation: rt-swap 0.16s ease; }
@keyframes rt-swap { from { opacity: 0.55; filter: blur(2px); } }

/* Menu dat uit de hoek van de chip openspringt; de markering glijdt tussen de rijen. */
.msm-fietsenwinkel-route .rt-menu {
  position: absolute;
  z-index: 30;
  left: 0;
  top: calc(100% + 6px);
  width: max-content;
  min-width: 100%;
  max-width: min(84vw, 360px);
  padding: 5px;
  border-radius: 14px;
  background: var(--rt-ink);
  box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--rt-ink) 70%, transparent);
  transform-origin: top left;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.18s var(--rt-ease), transform 0.18s var(--rt-ease);
}
.msm-fietsenwinkel-route .rt-menu[hidden] { display: none; }
.msm-fietsenwinkel-route .rt-menu[data-state="open"] { opacity: 1; transform: none; }
.msm-fietsenwinkel-route .rt-menu[data-state="closed"] { transition-duration: 0.12s; pointer-events: none; }
.msm-fietsenwinkel-route .rt-menu[data-side="top"] { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }
.msm-fietsenwinkel-route .rt-menu[data-align="right"] { left: auto; right: 0; transform-origin: top right; }
.msm-fietsenwinkel-route .rt-menu[data-side="top"][data-align="right"] { transform-origin: bottom right; }
.msm-fietsenwinkel-route .rt-list { position: relative; display: grid; gap: 1px; touch-action: none; }
.msm-fietsenwinkel-route .rt-pill {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--rt-row);
  border-radius: 10px;
  background: color-mix(in srgb, var(--rt-lime) 18%, var(--rt-ink));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s var(--rt-ease), opacity 0.15s ease;
}
.msm-fietsenwinkel-route .rt-opt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: var(--rt-row);
  padding: 0 12px 0 14px;
  border-radius: 10px;
  color: var(--rt-bg);
  font: 700 14px/1 var(--m-font-body, Arial, Helvetica, sans-serif);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.msm-fietsenwinkel-route .rt-opt::after {
  content: "";
  width: 12px;
  height: 7px;
  margin-top: -4px;
  border-left: 2.5px solid var(--rt-hot);
  border-bottom: 2.5px solid var(--rt-hot);
  transform: rotate(-45deg);
  visibility: hidden;
}
.msm-fietsenwinkel-route .rt-opt[aria-selected="true"]::after { visibility: visible; }

/* Uitkomst: kaart met routelijn en het advies met beeld. */
.msm-fietsenwinkel-route .rt-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(32px, 4vw, 56px);
  align-items: stretch;
}
.msm-fietsenwinkel-route .rt-result > * { min-width: 0; }
.msm-fietsenwinkel-route .rt-map {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  margin: 0;
  padding: clamp(18px, 2.4vw, 30px);
  background: var(--rt-bg);
  border: 1px solid var(--rt-ink);
}
.msm-fietsenwinkel-route .rt-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  overflow: visible;
  background: repeating-linear-gradient(180deg, transparent 0 43px, color-mix(in srgb, var(--rt-ink) 13%, transparent) 43px 44px);
}
.msm-fietsenwinkel-route .rt-ghost { fill: none; stroke: color-mix(in srgb, var(--rt-ink) 30%, transparent); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; }
.msm-fietsenwinkel-route .rt-line { fill: none; stroke: var(--rt-hot); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.msm-fietsenwinkel-route .rt-start rect { fill: var(--rt-ink); }
.msm-fietsenwinkel-route .rt-start path { fill: none; stroke: var(--rt-lime); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.msm-fietsenwinkel-route .rt-end path { fill: none; stroke: var(--rt-ink); stroke-width: 2.4; stroke-linecap: round; }
.msm-fietsenwinkel-route .rt-end .rt-flag { fill: var(--rt-ink); stroke-linejoin: round; }
.msm-fietsenwinkel-route figcaption {
  display: grid;
  align-content: end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--rt-ink) 30%, transparent);
}
.msm-fietsenwinkel-route .rt-km { font: 500 clamp(26px, 2.6vw, 34px)/1 var(--m-font-display, Georgia, "Times New Roman", serif); letter-spacing: -0.02em; }
.msm-fietsenwinkel-route .rt-km b {
  display: inline-block;
  margin-right: 0.12em;
  font: 500 clamp(72px, 8vw, 120px)/0.85 var(--m-font-display, Georgia, "Times New Roman", serif);
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--rt-ink);
}
.msm-fietsenwinkel-route .rt-week { font-size: 15px; color: color-mix(in srgb, var(--rt-ink) 80%, transparent); }
.msm-fietsenwinkel-route .rt-week b { font-variant-numeric: tabular-nums; }

.msm-fietsenwinkel-route .rt-advice {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--rt-ink);
  color: var(--rt-bg);
}
.msm-fietsenwinkel-route .rt-pic {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: radial-gradient(70% 80% at 50% 60%, color-mix(in srgb, var(--rt-lime) 22%, var(--rt-ink)), var(--rt-ink));
}
.msm-fietsenwinkel-route .rt-pic img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72%;
  height: auto;
  transform: translate(-50%, -48%) scale(0.96);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.5s var(--rt-ease);
  pointer-events: none;
}
.msm-fietsenwinkel-route .rt-pic img.is-on { opacity: 1; transform: translate(-50%, -50%); }
.msm-fietsenwinkel-route .rt-text { padding: clamp(20px, 2.6vw, 34px); }
.msm-fietsenwinkel-route .rt-label { color: var(--rt-lime); margin-bottom: 12px; }
.msm-fietsenwinkel-route .rt-uitkomst {
  margin: 0 0 12px;
  font: 500 clamp(22px, 2.2vw, 30px)/1.18 var(--m-font-display, Georgia, "Times New Roman", serif);
  letter-spacing: -0.02em;
}
.msm-fietsenwinkel-route .rt-waarom { margin: 0 0 22px; color: color-mix(in srgb, var(--rt-bg) 82%, transparent); }
.msm-fietsenwinkel-route .rt-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0; }
.msm-fietsenwinkel-route .rt-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--rt-bg);
  color: var(--rt-ink);
  font: 700 11px/1 var(--m-font-body, Arial, Helvetica, sans-serif);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.msm-fietsenwinkel-route .rt-cta svg { color: var(--rt-hot); transition: transform 0.2s; }
.msm-fietsenwinkel-route .rt-cta:hover svg { transform: translateX(4px); }
.msm-fietsenwinkel-route .rt-rek { color: var(--rt-lime); font-weight: 700; text-underline-offset: 4px; }
.msm-fietsenwinkel-route .rt-cta:focus-visible,
.msm-fietsenwinkel-route .rt-rek:focus-visible { outline: 3px solid var(--rt-hot); outline-offset: 3px; }

@media (max-width: 860px) {
  .msm-fietsenwinkel-route .rt-head,
  .msm-fietsenwinkel-route .rt-result { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .msm-fietsenwinkel-route { padding-left: 16px; padding-right: 16px; }
  .msm-fietsenwinkel-route .rt-zin { font-size: 25px; line-height: 1.6; }
  .msm-fietsenwinkel-route .rt-opt { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-fietsenwinkel-route .rt-menu { transform: none !important; transition: opacity 0.18s ease; }
  .msm-fietsenwinkel-route .rt-pill { transition: opacity 0.15s ease; }
  .msm-fietsenwinkel-route .rt-chev,
  .msm-fietsenwinkel-route .rt-chip,
  .msm-fietsenwinkel-route .rt-cta svg { transition: none; }
  .msm-fietsenwinkel-route .rt-chip:active { transform: none; }
  .msm-fietsenwinkel-route .rt-select[data-swap] .rt-val { animation: none; }
  .msm-fietsenwinkel-route .rt-pic img { transition: opacity 0.2s ease; transform: translate(-50%, -50%); }
}