/* foodtruck-boeken 1.0.0 · ReactBits TearTicket (reactbits.dev/micro/tear-ticket) in vanilla CSS/JS.
   Behouden: ticketvorm als clip-path met geperforeerde rand (gaatjes, inkepingen, ruwe bruggetjes),
   scharnier aan het verre uiteinde, bruggetjes die met de hoek knappen als vezels, terugveer van het
   ticket, val met zwaartekracht en vervaging, pointertilt en het herpositioneren na het afscheuren.
   Zonder script staat het ticket plat en is het formulier direct zichtbaar. */
.msm-foodtruck-boeken {
  --ftb-dusk: color-mix(in srgb, var(--m-ink, #1f2020) 66%, var(--m-primary, #2f6f62));
  --ftb-dusk-deep: color-mix(in srgb, var(--m-ink, #1f2020) 86%, var(--m-primary, #2f6f62));
  --ftb-sand: var(--m-bg, #f2dfb5);
  --ftb-ink: var(--m-ink, #1f2020);
  --ftb-primary: var(--m-primary, #2f6f62);
  --tt-w: 640px;
  --tt-h: 260px;
  --tt-stub: 168px;
  --tt-fit: 1;
  display: block;
  position: relative;
  scroll-margin-top: 116px;
  padding: clamp(56px, 8vw, 112px) 0;
  background: linear-gradient(180deg, var(--ftb-dusk-deep) 0%, var(--ftb-dusk) 55%, var(--ftb-dusk-deep) 100%);
  color: var(--ftb-sand);
  font-family: var(--m-font-body, Arial, sans-serif);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
}
.msm-foodtruck-boeken *,
.msm-foodtruck-boeken *::before,
.msm-foodtruck-boeken *::after { box-sizing: border-box; }
.msm-foodtruck-boeken [hidden] { display: none !important; }
.msm-foodtruck-boeken .ftb-inner { max-width: 1040px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.msm-foodtruck-boeken .ftb-kop { max-width: 640px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.msm-foodtruck-boeken .ftb-eyebrow { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.8; }
.msm-foodtruck-boeken h2 { margin: 0 0 16px; font: 900 clamp(44px, 7vw, 92px) / 0.9 var(--m-font-display, Impact, sans-serif); letter-spacing: -0.015em; }
.msm-foodtruck-boeken .ftb-lede { margin: 0 auto; max-width: 48ch; opacity: 0.85; }

/* ---------- Ticket: basis (zonder script) ---------- */
.msm-foodtruck-boeken .ftb-ticket {
  position: relative;
  width: min(var(--tt-w), 100%);
  margin: 0 auto;
  color: var(--ftb-ink);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.msm-foodtruck-boeken .ftb-plane { display: flex; }
.msm-foodtruck-boeken .ftb-piece { position: relative; }
.msm-foodtruck-boeken .ftb-piece--body { flex: 1 1 auto; min-width: 0; }
.msm-foodtruck-boeken .ftb-piece--stub { flex: 0 0 var(--tt-stub); }
.msm-foodtruck-boeken .ftb-paper { position: relative; height: 100%; background: var(--ftb-sand); border-radius: 18px 0 0 18px; overflow: hidden; }
.msm-foodtruck-boeken .ftb-paper--stub { background: var(--ftb-primary); color: var(--ftb-sand); border-radius: 0 18px 18px 0; border-left: 2px dashed color-mix(in srgb, var(--ftb-ink) 40%, transparent); }
.msm-foodtruck-boeken .ftb-edge,
.msm-foodtruck-boeken .ftb-fibres { display: none; }
.msm-foodtruck-boeken .ftb-content { position: relative; z-index: 1; padding: 24px 26px; }
.msm-foodtruck-boeken .ftb-art {
  position: absolute;
  right: -18px;
  bottom: -26px;
  width: 210px;
  aspect-ratio: 1;
  pointer-events: none;
}
.msm-foodtruck-boeken .ftb-art::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ftb-primary) 16%, transparent) 0%, transparent 70%);
}
.msm-foodtruck-boeken .ftb-art img { position: relative; display: block; width: 100%; height: auto; -webkit-user-drag: none; transition: filter 700ms ease; }
.msm-foodtruck-boeken .ftb-merk { margin: 0 0 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ftb-primary); }
.msm-foodtruck-boeken .ftb-titel { margin: 0 0 18px; max-width: 11ch; font: 900 40px / 0.92 var(--m-font-display, Impact, sans-serif); letter-spacing: -0.01em; text-transform: uppercase; }
.msm-foodtruck-boeken .ftb-meta { display: grid; gap: 6px; margin: 0; max-width: 250px; }
.msm-foodtruck-boeken .ftb-meta div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--ftb-ink) 26%, transparent); font-size: 12.5px; line-height: 1.3; }
.msm-foodtruck-boeken .ftb-meta dt { font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; padding-top: 2px; color: var(--ftb-primary); }
.msm-foodtruck-boeken .ftb-meta dd { margin: 0; }
.msm-foodtruck-boeken .ftb-stempel {
  display: none;
  position: absolute;
  top: 70px;
  right: 22px;
  margin: 0;
  padding: 6px 12px;
  border: 3px solid var(--ftb-primary);
  border-radius: 8px;
  color: var(--ftb-primary);
  font: 900 20px / 1 var(--m-font-display, Impact, sans-serif);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-9deg);
  opacity: 0.88;
}
.msm-foodtruck-boeken .ftb-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  min-height: 160px;
  padding: 16px;
  text-align: center;
}
.msm-foodtruck-boeken .ftb-stub-kop { margin: 0; font: 900 30px / 0.95 var(--m-font-display, Impact, sans-serif); text-transform: uppercase; }
.msm-foodtruck-boeken .ftb-stub-sub { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; opacity: 0.86; }
.msm-foodtruck-boeken .ftb-hint { display: none; margin: 18px auto 0; text-align: center; font-size: 13px; opacity: 0.78; }
.msm-foodtruck-boeken .ftb-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Ticket: met script (vaste maat, geschaald, clip-path-vorm) ---------- */
.msm-foodtruck-boeken[data-ready] .ftb-ticket { height: calc(var(--tt-h) * var(--tt-fit)); transition: height 650ms cubic-bezier(0.22, 1, 0.36, 1); }
.msm-foodtruck-boeken[data-ready] .ftb-ticket[data-used][data-orientation="vertical"] { height: calc((var(--tt-h) - var(--tt-stub)) * var(--tt-fit)); }
.msm-foodtruck-boeken[data-ready] .ftb-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tt-w);
  height: var(--tt-h);
  transform: scale(var(--tt-fit));
  transform-origin: top left;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}
.msm-foodtruck-boeken[data-ready] .ftb-ticket[data-shift="x"] .ftb-stage { transform: translateX(calc(var(--tt-stub) * var(--tt-fit) / 2)) scale(var(--tt-fit)); }
.msm-foodtruck-boeken[data-ready] .ftb-ticket[data-shift="y"] .ftb-stage { transform: translateY(calc(var(--tt-stub) * var(--tt-fit) / 2)) scale(var(--tt-fit)); }
.msm-foodtruck-boeken[data-ready] .ftb-plane { display: block; position: absolute; inset: 0; will-change: transform; }
.msm-foodtruck-boeken[data-ready] .ftb-piece { position: absolute; inset: 0; pointer-events: none; }
.msm-foodtruck-boeken[data-ready] .ftb-piece--stub { outline: none; will-change: transform; }
.msm-foodtruck-boeken[data-ready] .ftb-paper { position: absolute; inset: 0; height: auto; border-radius: 0; border: 0; pointer-events: auto; }
.msm-foodtruck-boeken[data-ready] .ftb-paper--stub { cursor: grab; touch-action: none; }
.msm-foodtruck-boeken[data-ready] .ftb-ticket[data-grabbing] .ftb-paper--stub { cursor: grabbing; }
.msm-foodtruck-boeken[data-ready] .ftb-edge,
.msm-foodtruck-boeken[data-ready] .ftb-fibres { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.msm-foodtruck-boeken .ftb-edge path { fill: none; stroke: color-mix(in srgb, var(--ftb-ink) 22%, transparent); stroke-width: 1; }
.msm-foodtruck-boeken .ftb-fibres path { fill: none; stroke: var(--ftb-sand); stroke-linecap: round; opacity: 0; }
.msm-foodtruck-boeken[data-ready] .ftb-content { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--tt-w) - var(--tt-stub)); padding: 26px 28px; transition: opacity 500ms ease; }
.msm-foodtruck-boeken[data-ready] .ftb-art { right: auto; bottom: auto; left: calc(var(--tt-w) - var(--tt-stub) - 228px); top: 44px; width: 220px; }
.msm-foodtruck-boeken[data-ready] .ftb-stub { position: absolute; top: 0; right: 0; bottom: 0; width: var(--tt-stub); height: auto; min-height: 0; }
.msm-foodtruck-boeken[data-ready] .ftb-hint { display: block; }
.msm-foodtruck-boeken .ftb-ticket:focus-within .ftb-piece--stub:focus-visible .ftb-paper--stub { box-shadow: inset 0 0 0 4px var(--ftb-sand), inset 0 0 0 6px var(--ftb-ink); }

/* Staand ticket op smalle schermen: stub onderaan. */
.msm-foodtruck-boeken[data-ready] .ftb-ticket[data-orientation="vertical"] .ftb-content { bottom: auto; width: 100%; height: calc(var(--tt-h) - var(--tt-stub)); padding: 24px 24px; }
.msm-foodtruck-boeken[data-ready] .ftb-ticket[data-orientation="vertical"] .ftb-art { left: auto; right: 4px; top: 222px; width: 156px; }
.msm-foodtruck-boeken[data-ready] .ftb-ticket[data-orientation="vertical"] .ftb-titel { font-size: 36px; }
.msm-foodtruck-boeken[data-ready] .ftb-ticket[data-orientation="vertical"] .ftb-meta { max-width: 190px; }
.msm-foodtruck-boeken[data-ready] .ftb-ticket[data-orientation="vertical"] .ftb-stub { top: auto; left: 0; width: auto; height: var(--tt-stub); flex-direction: row; flex-wrap: wrap; align-content: center; column-gap: 12px; }
.msm-foodtruck-boeken[data-ready] .ftb-ticket[data-orientation="vertical"] .ftb-stub-sub { flex-basis: 100%; }
.msm-foodtruck-boeken[data-ready] .ftb-ticket[data-orientation="vertical"] .ftb-stempel { top: auto; right: auto; bottom: 30px; left: 22px; }

/* Afgescheurd: beeld grijs, stempel zichtbaar, stub weg. */
.msm-foodtruck-boeken .ftb-ticket[data-used] .ftb-art img { filter: grayscale(1) brightness(0.8); }
.msm-foodtruck-boeken .ftb-ticket[data-used] .ftb-stempel { display: block; }
.msm-foodtruck-boeken .ftb-ticket[data-instant],
.msm-foodtruck-boeken .ftb-ticket[data-instant] .ftb-stage,
.msm-foodtruck-boeken .ftb-ticket[data-instant] .ftb-content,
.msm-foodtruck-boeken .ftb-ticket[data-instant] .ftb-art img { transition-duration: 0ms; }

/* Formulier: licht kaartvlak, zodat de widget het lichte thema kiest; accent volgt --m-primary. */
.msm-foodtruck-boeken .ftb-boeking {
  margin: clamp(28px, 4vw, 44px) auto 0;
  max-width: 820px;
  padding: clamp(22px, 4vw, 44px);
  border-radius: 24px;
  background: var(--ftb-sand);
  color: var(--ftb-ink);
  box-shadow: 0 34px 64px -34px rgba(0, 0, 0, 0.7);
  outline: none;
}
.msm-foodtruck-boeken .ftb-boeking:focus-visible { box-shadow: 0 0 0 3px var(--ftb-sand), 0 0 0 6px var(--ftb-primary); }
.msm-foodtruck-boeken .ftb-boeking .ms-widget {
  --ms-accent: var(--m-primary, #2f6f62);
  --ms-accent-dark: color-mix(in srgb, var(--m-primary, #2f6f62) 72%, black);
  --ms-ink: var(--m-ink, #1f2020);
  --ms-soft: color-mix(in srgb, var(--m-bg, #f2dfb5) 45%, white);
}
.msm-foodtruck-boeken .ftb-boeking .ms-title { font-family: var(--m-font-display, Impact, sans-serif); font-weight: 900; letter-spacing: -0.01em; }

@media (max-width: 600px) {
  .msm-foodtruck-boeken:not([data-ready]) .ftb-plane { flex-direction: column; }
  .msm-foodtruck-boeken:not([data-ready]) .ftb-piece--stub { flex-basis: auto; }
  .msm-foodtruck-boeken:not([data-ready]) .ftb-paper { border-radius: 18px 18px 0 0; }
  .msm-foodtruck-boeken:not([data-ready]) .ftb-paper--stub { border-radius: 0 0 18px 18px; border-left: 0; border-top: 2px dashed color-mix(in srgb, var(--ftb-ink) 40%, transparent); }
  .msm-foodtruck-boeken:not([data-ready]) .ftb-content { padding-bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-foodtruck-boeken .ftb-stage,
  .msm-foodtruck-boeken .ftb-content,
  .msm-foodtruck-boeken .ftb-art img { transition: none !important; }
}