/* ==========================================================================
   Music Matchmaker — scoped styles (.mm)
   Restyled to match the main All In One Music site: Poppins typography and
   the site's pink / teal / ink / accent palette, instead of the tool's
   original Fraunces + Inter + plum/wine/gold palette. All class names below
   are unchanged from the original tool (app.js generates this markup), only
   scoped under ".mm" and recolored so nothing else on the site is affected.
   ========================================================================== */

.mm {
  --plum: #1f4d63;                  /* site --teal */
  --wine: #8c3364;                  /* site --accent */
  --gold: #b25a86;                  /* site --accent-soft, secondary accent */
  --gold-soft: #f8faf5;             /* site --cream, light text/icons on dark */
  --cream: #ecd2d4;                 /* site --pink, page background wash */
  --paper: #f8faf5;                 /* site --cream, card surfaces */
  --ink: #14170f;                   /* site --ink */
  --muted: #55574c;                 /* site --ink-soft */
  --line: rgba(20, 23, 15, 0.15);   /* site --border */
  --ok: #2e7d5b;
  --shadow: 0 10px 40px rgba(20, 23, 15, 0.14);
  --shadow-sm: 0 4px 16px rgba(20, 23, 15, 0.10);
  --radius: 16px;
  font-family: var(--font);
}

.mm * { box-sizing: border-box; }
.mm button { font-family: inherit; cursor: pointer; }
.mm h1, .mm h2, .mm h3 { font-family: var(--font); }

/* ---------- Secondary bar: sits sticky right under the site header ---------- */
.mm .topbar {
  position: sticky;
  top: 82px;
  z-index: 45;
  background: rgba(243, 226, 227, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.mm .topbar__inner {
  max-width: var(--max-width, 1180px);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.mm .brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink);
  border: none;
  padding: 10px 16px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, transform .12s ease;
}
.mm .brand:hover, .mm .brand:active { background: var(--wine); transform: translateY(-1px); }
.mm .brand__logo {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.mm .brand__logo svg { width: 19px; height: 19px; display: block; }
.mm .brand__name { font-weight: 600; line-height: 1; }

.mm .progress {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
}
.mm .pstep {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.mm .pstep__dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1.5px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  transition: .2s;
}
.mm .pstep--done .pstep__dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.mm .pstep--active .pstep__dot { background: var(--wine); border-color: var(--wine); color: #fff; }
.mm .pstep--active { color: var(--ink); font-weight: 600; }
.mm .pstep__sep { width: 20px; height: 1.5px; background: transparent; }
@media (max-width: 900px) { .mm .pstep__label { display: none; } .mm .pstep__sep { width: 12px; } }

.mm .cartbtn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, background .15s ease;
}
.mm .cartbtn:hover, .mm .cartbtn:active { transform: translateY(-1px); background: var(--wine); }
.mm .cartbtn__icon { width: 26px; height: 26px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.mm .cartbtn__icon svg { width: 19px; height: 19px; display: block; }
.mm .cartbtn__count {
  background: var(--gold-soft);
  color: var(--wine);
  min-width: 20px; height: 20px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  padding: 0 5px;
}
.mm .cartbtn.pulse { animation: mmPulse .4s ease; }
@keyframes mmPulse { 0%{transform:scale(1)} 40%{transform:scale(1.08)} 100%{transform:scale(1)} }

.mm .progress__bar { height: 3px; background: var(--line); }
.mm .progress__fill {
  height: 100%;
  width: 0;
  background: var(--wine);
  transition: width .35s ease;
}

/* ---------- Stage ---------- */
.mm .stage {
  max-width: var(--max-width, 1180px);
  margin: 0 auto;
  padding: 28px 24px 24px;
}
/* Alleen op stappen mét de vaste onderbalk (Terug/Volgende) is er extra
   ruimte nodig zodat die balk niet over de laatste inhoud heen valt. Op
   stappen zonder die balk (start, gelegenheid kiezen, bevestiging) blijft
   de pagina zo kort mogelijk, zodat de footer zonder scrollen zichtbaar is.
   De waarde is bewust krap boven de werkelijke hoogte van de balk gehouden
   (i.p.v. ruim eromheen), zodat korte stappen zoals Momenten zonder
   scrollen in beeld passen. */
body.mm-has-navbar .mm .stage { padding-bottom: 92px; }
.mm .step-head { text-align: center; margin-bottom: 22px; }
.mm .step-head h1 { font-size: clamp(28px, 4vw, 42px); margin: 0 0 10px; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.mm .step-head p { color: var(--muted); font-size: 13px; font-family: var(--font-body, "Inter", sans-serif); margin: 0; }
.mm .step-head .eyebrow { margin-bottom: 8px; }

/* ---------- Landing / hero (wizard intro, rendered inside #stage) ---------- */
.mm .hero {
  min-height: 38vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink);
  position: static;
  overflow: visible;
}
.mm .hero h1 {
  font-size: clamp(34px, 6vw, 58px);
  margin: 0 0 20px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, var(--plum) 0%, var(--wine) 55%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.mm .hero p { font-size: clamp(13px, 1.7vw, 15px); font-family: var(--font-body, "Inter", sans-serif); color: var(--muted); max-width: 560px; margin: 0 auto 28px; }
.mm .hero__note { margin: 0 auto 28px; font-size: clamp(12px, 2.2vw, 14px); color: var(--muted); }

/* ---------- Buttons ---------- */
.mm .btn {
  display: inline-flex; align-items: center; gap: 10px;
  border: none; border-radius: 999px;
  padding: 15px 30px;
  font-size: 15px; font-weight: 600;
  transition: transform .15s ease, background .15s ease, box-shadow .2s ease, opacity .2s;
}
.mm .btn--primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.mm .btn--primary:hover { transform: translateY(-2px); background: var(--wine); box-shadow: 0 10px 24px rgba(140,51,100,.28); }
.mm .btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.mm .btn--ghost:hover, .mm .btn--ghost:active, .mm .btn--ghost:focus-visible { background: var(--wine); color: #fff; border-color: var(--wine); }
.mm .btn--big { padding: 18px 42px; font-size: 17px; }
.mm .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- Option grid (event types / moments) ---------- */
.mm .options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
}
.mm .option {
  position: relative;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-align: center;
  transition: .18s;
  box-shadow: var(--shadow-sm);
}
.mm .option:hover { border-color: var(--wine); transform: translateY(-3px); }
.mm .option--selected { border-color: var(--wine); background: #fff; box-shadow: 0 8px 30px rgba(140,51,100,.18); }
.mm .option--selected::after {
  content: "✓";
  position: absolute; top: 12px; right: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--wine); color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
}
.mm .option__emoji { font-size: 34px; display: block; margin-bottom: 8px; }
.mm .option__title { font-weight: 600; font-size: 19px; color: var(--ink); }

/* ---------- Act cards ---------- */
.mm .acts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.mm .card {
  position: relative;
  background: var(--plum);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: .18s;
}
.mm .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.mm .card--in { border-color: var(--wine); }
/* Foto bestrijkt de volledige card, onvervaagd — de plum panel eronder
   zorgt voor de leesbaarheid van naam/tekst. */
.mm .card__photo {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  background-position: center;
}
.mm .card__role {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(255,255,255,.92);
  color: var(--plum);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 6px 12px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.mm .card__body {
  position: relative; z-index: 2;
  padding: clamp(200px, 90%, 340px) 18px 18px;
  display: flex; flex-direction: column; gap: 14px; flex: 1;
}
.mm .card__panel {
  background: var(--plum);
  margin: 0 -18px;
  padding: 10px 18px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.mm .card__name {
  font-weight: 700; font-size: 18px; color: #fff;
  text-transform: uppercase; letter-spacing: .3px; margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.mm .card__price { font-weight: 700; color: var(--gold-soft); font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mm .card__price small { color: rgba(255,255,255,.8); font-weight: 500; font-size: 11.5px; }
.mm .card__links { display: flex; align-items: center; gap: 10px; }
.mm .card__more, .mm .card__video { background: none; border: none; color: rgba(255,255,255,.95); font-weight: 600; font-size: 13px; padding: 0; text-align: left; text-decoration: underline; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mm .card__more:hover, .mm .card__video:hover { color: #fff; }
.mm .card__linksep { color: rgba(255,255,255,.55); font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mm .card__extra { font-size: 13.5px; color: rgba(255,255,255,.92); line-height: 1.55; border-top: 1px dashed rgba(255,255,255,.3); padding-top: 10px; display: none; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mm .card__extra.open { display: block; }
.mm .card__foot { margin-top: auto; padding-top: 4px; }
.mm .card__add {
  width: 100%;
  border: 1.5px solid var(--wine);
  background: #fff;
  color: var(--wine);
  border-radius: 999px;
  padding: 12px;
  font-weight: 600; font-size: 14px;
  transition: .15s;
}
.mm .card__add:hover { background: var(--wine); color: #fff; }
.mm .card__add--in { background: var(--wine); color: #fff; }

/* ---------- Sticky nav footer (JS-generated inside #stage) ---------- */
.mm .navbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  z-index: 30;
}
.mm .navbar__inner {
  max-width: var(--max-width, 1180px); margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.mm .navbar__hint { color: var(--muted); font-size: 14px; }

/* De vaste onderbalk hierboven overlapt anders de site-footer eronder.
   Reserveer op stappen met die balk extra ruimte, zodat de footer bij
   helemaal doorscrollen volledig zichtbaar wordt — met dezelfde uitlijning
   als op de rest van de site. */
body.mm-has-navbar .site-footer { margin-bottom: 76px; }
@media (max-width: 640px) { body.mm-has-navbar .site-footer { margin-bottom: 96px; } }
/* Op korte stappen (bv. Momenten, met maar 4 keuzeknoppen, of het
   startscherm) is de pagina soms korter dan het scherm. Zonder
   onderstaande regel zou de footer dan ergens halverwege het scherm
   blijven staan in plaats van onderaan, met een grillige roze ruimte
   erna. Duw de footer daarom op de hele Matchmaker-pagina altijd naar de
   onderkant van (minimaal) het scherm — net als op de rest van de site —
   ongeacht welke stap er actief is, zodat je nooit hoeft te scrollen op
   korte stappen. */
body.mm-page { display: flex; flex-direction: column; min-height: 100vh; }
body.mm-page #main { flex: 1; }
.mm .navbar__hint b { color: var(--wine); }

/* Startscherm ("Music Matchmaker" / "Start de Music Matchmaker"): dit
   blok moet precies verticaal gecentreerd staan tussen de topbar en de
   footer, niet alleen binnen een vaste min-height bovenaan de pagina
   (dat gaf een scheve verdeling met te veel lege ruimte onderin). Door
   #main, .mm en .stage allemaal hun hoogte te laten doorgeven met flex,
   krijgt .hero de volledige resterende ruimte en centreert de inhoud
   daar precies binnen. Alleen actief op het startscherm (via de
   mm-landing class die matchmaker.js toggelt), zodat de andere stappen
   (die van nature al scrollen als de inhoud lang is) ongemoeid blijven. */
body.mm-landing #main { display: flex; flex-direction: column; }
/* Sticky is hier niet nodig (er is niets om onder weg te scrollen op het
   startscherm) en kan in sommige browsers de hoogteberekening van een
   omringende flex-kolom verstoren — daarom op dit scherm gewoon statisch. */
body.mm-landing .mm .topbar { position: static; }
body.mm-landing .mm { flex: 1; display: flex; flex-direction: column; min-height: 0; }
body.mm-landing .mm .stage {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; align-items: stretch;
  min-height: 0; padding-top: 0; padding-bottom: 0;
}
/* flex: none + margin: auto 0 is een dubbele, robuustere centrering
   (twee onafhankelijke CSS-mechanismes) dan alleen op justify-content van
   de ouder te vertrouwen. */
body.mm-landing .mm .hero { flex: none; min-height: 0; margin: auto 0; }

/* ---------- Drawer (line-up) ---------- */
.mm .drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--paper);
  z-index: 60;
  transform: translateX(100%);
  transition: transform .3s ease;
  display: flex; flex-direction: column;
  box-shadow: -10px 0 40px rgba(20,23,15,.18);
}
.mm .drawer.open { transform: translateX(0); }
.mm .drawer__head {
  padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.mm .drawer__head h2 { margin: 0; font-size: 21px; color: var(--ink); font-weight: 700; }
.mm .drawer__body { padding: 18px 22px; overflow-y: auto; flex: 1; }
.mm .scrim {
  position: fixed; inset: 0; background: rgba(20,23,15,.4);
  z-index: 55; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.mm .scrim.open { opacity: 1; pointer-events: auto; }
.mm .iconbtn {
  background: none; border: none; font-size: 17px; color: var(--muted);
  width: 34px; height: 34px; border-radius: 50%;
}
.mm .iconbtn:hover { background: var(--cream); color: var(--ink); }

/* line-up items */
.mm .lu-item {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.mm .lu-item__thumb { width: 52px; height: 52px; border-radius: 12px; flex: none; background-position: center; }
.mm .lu-item__info { flex: 1; min-width: 0; }
.mm .lu-item__eyebrow { font-size: 11px; font-weight: 700; color: var(--wine); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
.mm .lu-item__role { font-size: 12.5px; color: var(--muted); margin-bottom: 1px; }
.mm .lu-item__name { font-weight: 600; color: var(--ink); font-size: 15px; }
.mm .lu-item__price { color: var(--muted); font-size: 13px; }
.mm .lu-item__duration { color: var(--wine); font-weight: 600; }
.mm .lu-item__rm { background: none; border: none; color: #b23; font-size: 13px; font-weight: 600; }
.mm .lu-empty { text-align: center; color: var(--muted); padding: 40px 10px; }
.mm .lu-empty span { font-size: 40px; display: block; margin-bottom: 10px; }

/* pricing summary */
.mm .summary {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 18px;
}
.mm .summary__row { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; color: var(--ink); }
.mm .summary__row--muted { color: var(--muted); }
.mm .summary__row--save { color: var(--ok); font-weight: 600; }
.mm .summary__row--total { border-top: 1.5px solid var(--line); margin-top: 8px; padding-top: 12px; font-size: 18px; font-weight: 700; color: var(--ink); }
.mm .summary__note { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--ok); }
.mm .discount-banner {
  background: linear-gradient(135deg, rgba(178,90,134,.14), rgba(140,51,100,.08));
  border: 1px dashed var(--wine);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--wine);
  margin: 14px 0 0;
  text-align: center;
  font-weight: 600;
}
.mm .discount-ladder { display: flex; gap: 6px; margin-top: 10px; }
.mm .discount-ladder .rung {
  flex: 1; text-align: center; font-size: 11px; font-weight: 700;
  padding: 6px 2px; border-radius: 8px; background: #fff; color: var(--muted); border: 1px solid var(--line);
}
.mm .discount-ladder .rung--on { background: var(--wine); color: #fff; border-color: var(--wine); }
.mm .discount-ladder .rung--next { border-color: var(--wine); color: var(--wine); }

/* ---------- Overview page ---------- */
.mm .overview { max-width: 720px; margin: 0 auto; }
.mm .ov-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.mm .ov-row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.mm .ov-row:last-child { border-bottom: none; }
.mm .ov-row__thumb { width: 56px; height: 56px; border-radius: 12px; flex: none; background-position: center; }
.mm .ov-row__info { flex: 1; }
.mm .ov-row__eyebrow { font-size: 11px; font-weight: 700; color: var(--wine); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 3px; }
.mm .ov-row__role { font-size: 13px; color: var(--muted); margin-bottom: 1px; }
.mm .ov-row__name { font-weight: 600; color: var(--ink); font-size: 17px; }
.mm .ov-row__price { font-weight: 700; color: var(--wine); text-align: right; }
.mm .ov-row__duration { font-weight: 600; color: var(--wine); font-size: 11px; margin-top: 2px; white-space: nowrap; }
.mm .ov-row__rm { background: none; border: 1px solid var(--line); border-radius: 8px; color: #b23; font-weight: 600; font-size: 12px; padding: 6px 10px; }

/* ---------- Form ---------- */
.mm .form { max-width: 620px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 30px; }
.mm .field { margin-bottom: 18px; }
.mm .field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; color: var(--ink); }
.mm .field label .req { color: var(--wine); }
.mm .field input, .mm .field textarea {
  width: 100%; padding: 13px 15px;
  border: 1.5px solid var(--line); border-radius: 12px;
  font-size: 15px; font-family: inherit; color: var(--ink);
  background: #fff;
  transition: .15s;
}
.mm .field input:focus, .mm .field textarea:focus { outline: none; border-color: var(--wine); background: #fff; box-shadow: 0 0 0 3px rgba(140,51,100,.12); }
.mm .field input.invalid, .mm .field textarea.invalid { border-color: #d3506a; background: #fff5f7; }
.mm .field .err { color: #c0304c; font-size: 12.5px; margin-top: 5px; display: none; }
.mm .field .err.show { display: block; }
.mm .field textarea { resize: vertical; min-height: 84px; }
.mm .field .checkbox {
  display: flex; align-items: center; gap: 7px;
  font-weight: 500; font-size: 13px; color: var(--muted);
  margin-top: 8px; cursor: pointer;
}
.mm .field .checkbox input { width: auto; padding: 0; accent-color: var(--wine); }
.mm .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .mm .form-grid { grid-template-columns: 1fr; } }

/* ---------- Confirmation ---------- */
.mm .done { max-width: 640px; margin: 0 auto; text-align: center; }
.mm .done__check {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--ok); color: #fff; font-size: 44px;
  display: grid; place-items: center; margin: 10px auto 24px;
  box-shadow: var(--shadow);
}
.mm .done__panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 26px; text-align: left; margin-top: 26px; }
.mm .done__panel h3 { margin: 0 0 14px; color: var(--ink); }
.mm .kv { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; border-bottom: 1px dashed var(--line); }
.mm .kv:last-child { border-bottom: none; }
.mm .kv span:first-child { color: var(--muted); }

/* ---------- Video / moment modal ---------- */
.mm .modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20,23,15,.62);
  display: none; place-items: center; padding: 20px;
}
.mm .modal.open { display: grid; }
/* Video kan geopend worden vanaf een kaart binnen een andere popup (bv. de
   combinatie-tip), en moet dan altijd zichtbaar boven die popup verschijnen. */
.mm .modal#videoModal { z-index: 90; }
.mm .modal__box { background: var(--paper); border-radius: var(--radius); width: min(760px, 96vw); max-height: 90vh; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.mm .modal__box--sm { width: min(440px, 92vw); }
.mm .modal__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.mm .modal__head h3 { margin: 0; color: var(--ink); }
.mm .modal__kicker { font-size: 11px; font-weight: 700; color: var(--wine); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.mm .modal__video { aspect-ratio: 16/9; background: #000; }
.mm .modal__video iframe { width: 100%; height: 100%; border: 0; display: block; }
.mm .modal__video video { width: 100%; height: 100%; display: block; }
.mm .modal__body { padding: 22px; overflow-y: auto; }
.mm .modal__hint { margin: 0 0 4px; color: var(--ink); font-size: 14.5px; line-height: 1.5; }

/* ---------- Combinatie-tip modal ---------- */
.mm .tip-card { display: flex; flex-direction: column; gap: 8px; }
.mm .tip-card__eyebrow {
  font-size: 11px; font-weight: 700; color: var(--wine);
  text-transform: uppercase; letter-spacing: .3px;
}

/* ---------- Moment picker (bruiloft) ---------- */
.mm .moment-picker { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* Bij een keuze uit meerdere momenten (i.p.v. één vastgezette optie) alle
   boxen exact even breed maken (grid i.p.v. flex-wrap), zodat de labels
   én de "vanaf"-prijzen per rij netjes op één lijn staan — zelfde aanpak
   als bij de duration-picker hierboven. */
.mm .moment-picker--multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.mm .moment-picker--multi .mchip { width: 100%; }
.mm .mchip {
  position: relative;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  padding: 10px 16px; border-radius: 16px; font-size: 14px; font-weight: 600;
  transition: .15s; display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 168px; text-align: center;
}
/* Label en prijs mogen nooit afbreken naar een extra regel — anders wordt
   de box hoger dan de andere ernaast en staat het geheel niet meer netjes
   op één lijn met de rest van de rij. */
.mm .mchip__label,
.mm .mchip__price { white-space: nowrap; }
.mm .mchip:hover { border-color: var(--wine); }
.mm .mchip--on { background: var(--wine); color: #fff; border-color: var(--wine); }
.mm .mchip--locked { cursor: default; }
.mm .mchip--locked:hover { border-color: var(--wine); }
.mm .mchip--extra:not(.mchip--on) { border-style: dashed; border-color: var(--wine); }
/* Moment is al bezet door een andere act in de line-up: niet klikbaar,
   maar wel hoverbaar zodat er uitleg verschijnt.
   Bewust GEEN `opacity` hier om de box te dimmen: opacity op dit element
   zou ook zijn eigen tooltip-kind laten "doorschijnen" (opacity werkt op
   het hele element inclusief kinderen als één laag), dus we dimmen met
   expliciete kleuren in plaats daarvan. */
.mm .mchip--taken { cursor: not-allowed; background: var(--paper); color: var(--muted); border-color: var(--line); }
.mm .mchip--taken .mchip__price { color: var(--muted); opacity: 1; }
.mm .mchip--taken:hover { border-color: var(--line); }
/* Uitleg-tooltip op een mchip/dchip: een echte DOM-node (i.p.v. een
   ::after-pseudo-element) zodat JS 'm kan opmeten en binnen de rand van
   de popup kan houden (zie positionChipTooltip in matchmaker.js) —
   verschijnt bovendien direct bij hoveren, zonder de vertraging die het
   native title-attribuut altijd heeft. */
.mm .chip-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 30;
}
.mm .mchip:hover .chip-tooltip,
.mm .dchip:hover .chip-tooltip { opacity: 1; visibility: visible; }
.mm .mchip__price { font-size: 12px; font-weight: 700; opacity: .8; }
.mm .moment-total { margin-top: 16px; font-size: 14px; color: var(--ink); text-align: center; }

/* ---------- Speelduur picker ---------- */
.mm .duration-slot { margin-top: 16px; }
.mm .duration-slot:first-of-type { margin-top: 12px; }
.mm .duration-slot__label {
  font-size: 12px; font-weight: 700; color: var(--wine);
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px;
}
/* Grid i.p.v. flex-wrap zodat elke box exact even breed is, ook als de
   laatste rij minder items heeft (bv. 2 i.p.v. 3 uur-opties). */
.mm .duration-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.mm .dchip {
  position: relative;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  padding: 12px 14px; border-radius: 16px; font-size: 14px; font-weight: 600;
  transition: .15s; display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; width: 100%;
}
.mm .dchip:hover { border-color: var(--wine); }
.mm .dchip--on { background: var(--wine); color: #fff; border-color: var(--wine); }
.mm .dchip__hours { font-size: 15px; font-weight: 700; }
.mm .dchip__price { font-size: 13px; font-weight: 700; }
.mm .dchip__sub { font-size: 10.5px; font-weight: 500; opacity: .75; }

/* ---------- Toast ---------- */
.mm .toast {
  position: fixed; left: 50%; bottom: 158px; z-index: 95;
  transform: translate(-50%, 16px);
  background: var(--ink); color: #fff;
  padding: 13px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  max-width: min(92vw, 480px); text-align: center;
}
.mm .toast b { color: var(--gold-soft); font-weight: 700; }
.mm .toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Persistent discount message ---------- */
.mm .discount-float {
  position: fixed; left: 50%; bottom: 92px; z-index: 80;
  transform: translate(-50%, 12px);
  background: var(--wine); color: #fff;
  padding: 13px 24px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  max-width: min(92vw, 520px); text-align: center;
}
.mm .discount-float b { color: var(--gold-soft); font-weight: 700; }
.mm .discount-float.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ---------- Line-up regel op de bevestigingspagina ---------- */
.mm .lu-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.mm .lu-row:last-of-type { border-bottom: none; }
.mm .lu-row__text { flex: 1; min-width: 0; }
.mm .lu-row__moment {
  font-size: 11px; font-weight: 700; color: var(--wine);
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 3px;
}
.mm .lu-row__role { font-size: 13px; color: var(--muted); margin-bottom: 1px; }
.mm .lu-row__name { font-weight: 600; color: var(--ink); font-size: 16px; }
.mm .lu-row__priceblock { text-align: right; }
.mm .lu-row__price { font-weight: 700; color: var(--wine); white-space: nowrap; }
.mm .lu-row__duration { font-weight: 600; color: var(--wine); font-size: 11px; margin-top: 2px; white-space: nowrap; }

.mm .fade { animation: mmFade .35s ease; }
@keyframes mmFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .mm .brand__name { display: none; }
  .mm .topbar__inner { gap: 12px; padding: 10px 16px; }
  .mm .cartbtn__label { display: none; }
}