.msf-app {
  max-width: 820px;
  margin: 0 auto;
  padding: 26px 14px 90px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: #161616;
}

.msf-hero {
  text-align: center;
  padding: 34px 22px 26px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.75), transparent 30%),
    linear-gradient(135deg, #f7efe8, #ead9cc 46%, #d8bda9);
  box-shadow: 0 18px 48px rgba(0,0,0,.12);
  overflow: hidden;
}

.msf-kicker {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}

.msf-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(34px, 9vw, 58px);
  line-height: .95;
  letter-spacing: -0.04em;
}

.msf-hero p {
  margin: 0 auto 22px;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.45;
}

.msf-upload-button,
.msf-download,
.msf-refresh,
.msf-beamer-download,
.msf-beamer-fullscreen,
.msf-beamer-start,
.msf-beamer-stop {
  font-family: inherit;
}

.msf-upload-button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 17px 28px;
  font-size: 18px;
  font-weight: 800;
  background: #141414;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
}

.msf-upload-button:disabled {
  opacity: .55;
  cursor: wait;
}

.msf-help {
  margin: 16px auto 0;
  max-width: 460px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(0,0,0,.66);
}

.msf-status {
  min-height: 24px;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
}

.msf-status.busy { color: #59402d; }
.msf-status.success { color: #17672d; }
.msf-status.error { color: #9c1d1d; }

.msf-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 13px 0 11px;
  margin: 8px 0 2px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.msf-tabs span,
.msf-tabs button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  white-space: nowrap;
  border-radius: 999px;
  padding: 9px 13px;
  background: #f1eee9;
  color: #6b625a;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
}

.msf-tabs button {
  cursor: pointer;
}

.msf-tabs .active {
  background: #141414;
  color: #fff;
}

.msf-panel[hidden] {
  display: none !important;
}

.msf-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 10px;
}

.msf-gallery-header h2 {
  margin: 0;
  font-size: 24px;
}

.msf-gallery-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.msf-refresh,
.msf-download {
  border: 0;
  border-radius: 999px;
  padding: 9px 13px;
  font-weight: 800;
  background: #f0ece8;
  color: #111;
  cursor: pointer;
  text-decoration: none !important;
  line-height: 1.2;
}

.msf-download {
  background: #141414;
  color: #fff !important;
}

.msf-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.msf-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #eee;
  cursor: pointer;
  box-shadow: 0 4px 13px rgba(0,0,0,.08);
}

.msf-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.msf-empty {
  grid-column: 1 / -1;
  padding: 34px 18px;
  border-radius: 20px;
  background: #f7f4f0;
  text-align: center;
  color: #6a625c;
  font-weight: 700;
}

/* Bruiloftsbingo */
.msf-bingo {
  margin-top: 18px;
  padding: 22px 16px 26px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 14% 10%, rgba(255,255,255,.82), transparent 32%),
    linear-gradient(135deg, #f8f2ed, #ead8cb 48%, #d9bda9);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}

.msf-bingo-standalone .msf-bingo {
  margin-top: 0;
}

.msf-bingo-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 14px;
}

.msf-bingo-header h2 {
  margin: 0 0 8px;
  font-size: clamp(30px, 8vw, 52px);
  line-height: .98;
  letter-spacing: -0.04em;
}

.msf-bingo-header p {
  margin: 0 auto;
  max-width: 560px;
  color: rgba(0,0,0,.68);
  font-size: 16px;
  line-height: 1.45;
}

.msf-bingo-message {
  margin: 16px auto 14px;
  max-width: 600px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.64);
  color: #59402d;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
}

.msf-bingo-message.busy { color: #59402d; }
.msf-bingo-message.success { color: #17672d; }
.msf-bingo-message.error { color: #9c1d1d; }

.msf-bingo-message.is-complete {
  background: #141414;
  color: #fff;
}

.msf-bingo-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 680px;
  margin: 0 auto;
}

.msf-bingo-square {
  position: relative;
  min-height: clamp(118px, 27vw, 178px);
  padding: 14px 10px 12px;
  border: 0;
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  color: #171717;
  font-family: inherit;
  font-size: clamp(14px, 3.4vw, 20px);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(0,0,0,.10);
  transition: transform .12s ease, background .12s ease, color .12s ease, opacity .12s ease;
}

.msf-bingo-square:active {
  transform: scale(.98);
}

.msf-bingo-square.is-done,
.msf-bingo-square:disabled {
  background: #141414;
  color: #fff;
  cursor: default;
  opacity: 1;
}

.msf-bingo-square.has-photo {
  overflow: hidden;
  background: #141414;
}

.msf-bingo-photo-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.msf-bingo-photo-wrap[hidden] {
  display: none !important;
}

.msf-bingo-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: brightness(.62);
}

.msf-bingo-check {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 10px;
  display: none;
  font-size: 20px;
  font-weight: 950;
}

.msf-bingo-square.is-done .msf-bingo-check {
  display: block;
}

.msf-bingo-upload {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 auto 9px;
  font-size: clamp(22px, 7vw, 34px);
  line-height: 1;
}

.msf-bingo-text {
  position: relative;
  z-index: 2;
  display: block;
  padding: 0 2px;
}

.msf-bingo-square.has-photo .msf-bingo-upload {
  display: none;
}

.msf-bingo-square.has-photo .msf-bingo-text {
  text-shadow: 0 2px 8px rgba(0,0,0,.72);
}

.msf-lightbox[hidden],
.msf-lightbox-nav[hidden] {
  display: none !important;
}

.msf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,.94);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

.msf-lightbox img {
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
}

.msf-lightbox-close {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #111;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.msf-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 64px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #111;
  font-size: 48px;
  line-height: 1;
  cursor: pointer;
}

.msf-lightbox-prev { left: 12px; }
.msf-lightbox-next { right: 12px; }

.msf-lightbox-count {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 2;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #111;
  font-size: 14px;
  font-weight: 800;
}

body.msf-lightbox-open {
  overflow: hidden;
}

/* Beamer / TV fotowand */
.msf-beamer {
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
  padding: 22px 26px 54px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(135deg, #120f0d, #2a211c 45%, #0b0b0c);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden;
}

.msf-beamer-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.msf-beamer-kicker {
  display: inline-block;
  margin-bottom: 4px;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.msf-beamer h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 5vw, 72px);
  line-height: .95;
  letter-spacing: -0.05em;
}

.msf-beamer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 620px;
}

.msf-beamer-count,
.msf-beamer-updated {
  display: inline-block;
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
  font-weight: 800;
  font-size: 14px;
}

.msf-beamer-download,
.msf-beamer-fullscreen,
.msf-beamer-start,
.msf-beamer-stop {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: 11px 15px;
  background: rgba(255,255,255,.92);
  color: #121212 !important;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none !important;
}

.msf-beamer-start {
  background: #fff4d8;
}

.msf-beamer-stop {
  background: rgba(255,255,255,.18);
  color: #fff !important;
}

.msf-beamer-start[hidden],
.msf-beamer-stop[hidden] {
  display: none !important;
}

.msf-beamer-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, 12vh);
  gap: 10px;
  height: calc(100vh - 170px);
}

.msf-beamer-photo {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.msf-beamer-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
}

.msf-beamer-photo-1 { grid-column: span 2; grid-row: span 2; }
.msf-beamer-photo-2 { grid-column: span 2; grid-row: span 1; }
.msf-beamer-photo-3 { grid-column: span 1; grid-row: span 2; }
.msf-beamer-photo-4 { grid-column: span 2; grid-row: span 2; }
.msf-beamer-photo-5 { grid-column: span 1; grid-row: span 1; }
.msf-beamer-photo-6 { grid-column: span 2; grid-row: span 1; }
.msf-beamer-photo-7 { grid-column: span 1; grid-row: span 1; }

.msf-beamer-empty {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  max-width: 820px;
  padding: 34px 44px;
  border-radius: 28px;
  background: rgba(255,255,255,.12);
  text-align: center;
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.15;
}

.msf-beamer-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 24px;
  background: rgba(0,0,0,.42);
  color: rgba(255,255,255,.88);
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.msf-beamer:fullscreen {
  padding-top: 24px;
}

.msf-beamer-photo {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.msf-beamer-photo:focus-visible,
.msf-beamer-start:focus-visible,
.msf-beamer-stop:focus-visible,
.msf-beamer-fullscreen:focus-visible,
.msf-beamer-slide-nav:focus-visible {
  outline: 4px solid rgba(255,255,255,.9);
  outline-offset: 3px;
}

.msf-beamer-slideshow[hidden] {
  display: none !important;
}

.msf-beamer-slideshow {
  position: fixed;
  inset: 0;
  z-index: 999998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

.msf-beamer-slideshow img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background: #000;
  user-select: none;
  -webkit-user-select: none;
}

.msf-beamer-slide-shade {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26vh;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
}

.msf-beamer-slide-info {
  position: fixed;
  left: 34px;
  bottom: 32px;
  z-index: 2;
  max-width: calc(100vw - 68px);
  color: #fff;
  text-shadow: 0 4px 18px rgba(0,0,0,.85);
}

.msf-beamer-slide-title {
  font-size: clamp(32px, 5vw, 74px);
  line-height: .95;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.msf-beamer-slide-count {
  margin-top: 10px;
  display: inline-block;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: rgba(255,255,255,.9);
  font-size: clamp(14px, 1.5vw, 20px);
  font-weight: 800;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.msf-beamer-slide-nav {
  position: fixed;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: clamp(48px, 5vw, 76px);
  height: clamp(72px, 9vw, 112px);
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: clamp(48px, 6vw, 86px);
  line-height: .8;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.msf-beamer-slide-prev { left: 22px; }
.msf-beamer-slide-next { right: 22px; }

.msf-beamer.msf-beamer-slideshow-active .msf-beamer-footer,
.msf-beamer.msf-beamer-slideshow-active .msf-beamer-topbar {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 820px) {
  .msf-beamer-topbar {
    display: block;
  }

  .msf-beamer-actions {
    justify-content: flex-start;
    margin-top: 14px;
  }

  .msf-beamer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(86px, 12vh);
  }
}

@media (max-width: 520px) {
  .msf-app {
    padding-left: 10px;
    padding-right: 10px;
  }

  .msf-hero {
    border-radius: 24px;
    padding: 30px 18px 22px;
  }

  .msf-gallery-header {
    align-items: flex-start;
  }

  .msf-gallery-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .msf-refresh,
  .msf-download {
    text-align: center;
  }

  .msf-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .msf-lightbox-nav {
    width: 42px;
    height: 56px;
    font-size: 42px;
    background: rgba(255,255,255,.7);
  }

  .msf-beamer {
    padding: 18px 14px 56px;
  }

  .msf-beamer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .msf-beamer-photo {
    border-radius: 12px;
  }

  .msf-beamer-footer {
    font-size: 14px;
  }
}

@media (max-width: 680px) {
  .msf-beamer-slide-info {
    left: 18px;
    bottom: 24px;
    max-width: calc(100vw - 36px);
  }

  .msf-beamer-slide-nav {
    width: 44px;
    height: 64px;
    font-size: 48px;
  }

  .msf-beamer-slide-prev { left: 8px; }
  .msf-beamer-slide-next { right: 8px; }
}


/* Beamer v6: clean slideshow for TV/beamer */
.msf-beamer-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.msf-beamer-logo {
  flex: 0 0 auto;
  width: clamp(162px, 18vw, 258px);
  height: clamp(162px, 18vw, 258px);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,.32);
}

.msf-beamer-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
}

.msf-beamer-logo span {
  color: #15100d;
  font-size: clamp(18px, 2vw, 32px);
  font-weight: 950;
  letter-spacing: -0.08em;
}

.msf-beamer h1 {
  font-size: clamp(28px, 3.8vw, 56px);
  letter-spacing: -0.045em;
}

.msf-beamer-kicker,
.msf-beamer-count,
.msf-beamer-updated,
.msf-beamer-fullscreen,
.msf-beamer-slide-info,
.msf-beamer-slide-title,
.msf-beamer-slide-count,
.msf-beamer-slide-nav,
.msf-beamer-slide-shade {
  display: none !important;
}

.msf-beamer-slideshow img {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}

.msf-beamer-slide-brand {
  position: fixed;
  left: 32px;
  top: 28px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px 12px 12px;
  border-radius: 22px;
  background: rgba(0,0,0,.42);
  color: #fff;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.msf-beamer-logo-small {
  width: clamp(126px, 12vw, 198px);
  height: clamp(126px, 12vw, 198px);
  border-radius: 24px;
}

.msf-beamer-slide-heading {
  color: #fff;
  font-size: clamp(20px, 2.4vw, 42px);
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -0.045em;
  text-shadow: 0 3px 18px rgba(0,0,0,.75);
  white-space: nowrap;
}

.msf-beamer.msf-beamer-slideshow-active .msf-beamer-footer,
.msf-beamer.msf-beamer-slideshow-active .msf-beamer-topbar {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 720px) {
  .msf-beamer-slide-brand {
    left: 16px;
    top: 16px;
    gap: 10px;
    padding: 8px 12px 8px 8px;
  }
  .msf-beamer-slide-heading {
    font-size: clamp(16px, 4vw, 28px);
    white-space: normal;
  }
}


/* Beamer v7: logo only, no title text */
.msf-beamer-brand h1,
.msf-beamer-slide-heading {
  display: none !important;
}

.msf-beamer-brand {
  gap: 0;
}

.msf-beamer-slide-brand {
  gap: 0;
  padding: 10px;
}


/* Beamer v9: logo 3x larger */
.msf-beamer-logo {
  width: clamp(162px, 18vw, 258px);
  height: clamp(162px, 18vw, 258px);
  border-radius: 28px;
}

.msf-beamer-logo-small {
  width: clamp(126px, 12vw, 198px);
  height: clamp(126px, 12vw, 198px);
  border-radius: 24px;
}

.msf-beamer-logo img {
  padding: 10px;
}

.msf-beamer-slide-brand {
  padding: 16px;
}

@media (max-width: 720px) {
  .msf-beamer-logo {
    width: clamp(110px, 30vw, 180px);
    height: clamp(110px, 30vw, 180px);
  }
  .msf-beamer-logo-small {
    width: clamp(96px, 26vw, 150px);
    height: clamp(96px, 26vw, 150px);
  }
}


/* Beamer v11: random slideshow + pure transparent PNG logo only */
.msf-beamer-logo,
.msf-beamer-logo-small {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.msf-beamer-logo img,
.msf-beamer-logo-small img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.msf-beamer-slide-brand {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  outline: 0 !important;
}

/* v15: centered tijdlijn, menu en doorgeven-tab */
.msf-tabs {
  justify-content: center;
}

.msf-info-panel {
  margin: 18px auto 0;
  max-width: 720px;
  padding: 26px 18px 30px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 14% 10%, rgba(255,255,255,.82), transparent 32%),
    linear-gradient(135deg, #f8f2ed, #ead8cb 48%, #d9bda9);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  text-align: center;
}

.msf-info-header h2 {
  margin: 0 0 8px;
  font-size: clamp(30px, 8vw, 52px);
  line-height: .98;
  letter-spacing: -0.04em;
}

.msf-info-header p {
  margin: 0 auto 18px;
  max-width: 560px;
  color: rgba(0,0,0,.68);
  font-size: 16px;
  line-height: 1.45;
}

.msf-timeline-list,
.msf-menu-list {
  display: grid;
  gap: 12px;
  margin: 18px auto 0;
  max-width: 560px;
}

.msf-timeline-item,
.msf-menu-item {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 16px 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 7px 18px rgba(0,0,0,.08);
}

.msf-timeline-icon,
.msf-menu-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #141414;
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

.msf-timeline-time {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 950;
  color: #141414;
}

.msf-timeline-text {
  font-size: 17px;
  font-weight: 800;
  color: #4f4036;
}

.msf-menu-item h3 {
  margin: 7px 0 2px;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.msf-menu-item p {
  margin: 0;
  max-width: 460px;
  color: #5f5148;
  font-size: 16px;
  line-height: 1.42;
  font-weight: 650;
}

.msf-message-form {
  display: grid;
  gap: 14px;
  max-width: 560px;
  margin: 18px auto 0;
  text-align: left;
}

.msf-message-form label span {
  display: block;
  margin: 0 0 6px;
  font-weight: 900;
}

.msf-message-form small {
  color: #6a625c;
  font-weight: 700;
}

.msf-message-form input,
.msf-message-form textarea {
  box-sizing: border-box;
  width: 100%;
  border: 0;
  border-radius: 18px;
  padding: 14px 15px;
  background: rgba(255,255,255,.82);
  color: #161616;
  font: inherit;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

.msf-message-form textarea {
  min-height: 130px;
  resize: vertical;
}

.msf-message-form button {
  justify-self: center;
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 15px 24px;
  background: #141414;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

.msf-message-form button:disabled {
  opacity: .6;
  cursor: wait;
}

.msf-message-status {
  min-height: 24px;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
}

.msf-message-status.busy { color: #59402d; }
.msf-message-status.success { color: #17672d; }
.msf-message-status.error { color: #9c1d1d; }

@media (max-width: 560px) {
  .msf-tabs {
    justify-content: flex-start;
  }

  .msf-info-panel {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* v17: responsive bloknavigatie, klassieke tijdlijn/menu, bingo-watermerk en reactiespagina */
.msf-tabs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 10px;
  overflow: visible !important;
  align-items: stretch;
  justify-content: initial !important;
  padding: 12px 0;
}

.msf-tabs button,
.msf-tabs span {
  width: 100%;
  min-height: 48px;
  white-space: normal !important;
  border-radius: 18px !important;
  padding: 11px 10px !important;
  background: #f4efe9;
  color: #403833;
  box-shadow: 0 5px 14px rgba(0,0,0,.07);
  text-align: center;
}

.msf-tabs .active {
  background: #141414 !important;
  color: #fff !important;
}

.msf-bingo-square {
  overflow: hidden;
  font-size: clamp(11px, 2.5vw, 16px) !important;
  line-height: 1.08 !important;
  padding: 10px 7px 9px !important;
  background: rgba(255,255,255,.82) !important;
}

.msf-bingo-square::before {
  content: "";
  position: absolute;
  inset: 12%;
  z-index: 0;
  background-image: url("https://mariskaensteven.nl/wp-content/uploads/2026/06/Logo-kaart-bruiloft-scaled.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .13;
  pointer-events: none;
}

.msf-bingo-square.has-photo::before,
.msf-bingo-square.is-done.has-photo::before {
  opacity: 0;
}

.msf-bingo-upload {
  font-size: clamp(17px, 5vw, 26px) !important;
  margin-bottom: 6px !important;
}

.msf-bingo-text {
  font-size: clamp(11px, 2.5vw, 16px) !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
}

.msf-bingo-card {
  gap: 8px !important;
}

.msf-info-panel {
  background: #fff !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.msf-timeline-panel,
.msf-menu-panel {
  max-width: 720px !important;
  padding-top: 18px !important;
}

.msf-timeline-panel .msf-kicker,
.msf-menu-panel .msf-kicker {
  display: none !important;
}

.msf-timeline-panel .msf-info-header h2 {
  margin: 0 0 28px;
  color: #30313a;
  font-size: clamp(32px, 6vw, 42px);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.msf-timeline-list {
  max-width: 560px !important;
  gap: 0 !important;
  margin: 0 auto !important;
}

.msf-timeline-item {
  position: relative;
  display: grid !important;
  grid-template-columns: 86px 72px minmax(0, 1fr);
  align-items: center;
  justify-items: start !important;
  gap: 18px !important;
  padding: 0 0 28px !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-align: left;
}

.msf-timeline-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 121px;
  top: 54px;
  bottom: 6px;
  width: 1px;
  background: rgba(0,0,0,.12);
}

.msf-timeline-time {
  margin: 0 !important;
  color: #404149 !important;
  font-size: clamp(19px, 4.4vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1;
}

.msf-timeline-icon {
  width: 58px !important;
  height: 58px !important;
  background: transparent !important;
  color: #202226 !important;
  border-radius: 0 !important;
  display: grid !important;
  place-items: center;
}

.msf-line-icon {
  width: 50px;
  height: 50px;
  display: block;
}

.msf-line-icon path,
.msf-line-icon circle {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.msf-timeline-text {
  color: #101115 !important;
  font-size: clamp(20px, 4.6vw, 26px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}

.msf-menu-panel {
  max-width: 760px !important;
  padding: 18px 12px 34px !important;
}

.msf-menu-card {
  max-width: 690px;
  margin: 0 auto;
  text-align: center;
  color: #101115;
}

.msf-menu-script-title,
.msf-menu-item h3 {
  font-family: "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive;
  font-weight: 700;
  color: #30313a;
}

.msf-menu-script-title {
  font-size: clamp(34px, 8vw, 48px);
  line-height: 1;
  margin: 0 0 18px;
}

.msf-menu-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px auto 24px;
  max-width: 360px;
  height: 26px;
}

.msf-menu-ornament span::before,
.msf-menu-ornament span::after {
  content: "";
  display: inline-block;
  width: 150px;
  height: 20px;
  border-top: 3px solid #101115;
  border-radius: 50%;
  transform: rotate(-7deg);
  opacity: .95;
}

.msf-menu-ornament span::after {
  transform: rotate(7deg) scaleX(-1);
  margin-left: 18px;
}

.msf-menu-ornament-bottom {
  margin-top: 18px;
}

.msf-menu-list {
  max-width: 680px !important;
  gap: 18px !important;
  margin: 0 auto !important;
}

.msf-menu-item {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-align: center;
}

.msf-menu-icon {
  display: none !important;
}

.msf-menu-item h3 {
  margin: 0 0 18px !important;
  font-size: clamp(27px, 7vw, 39px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.msf-menu-item p {
  margin: 0 auto !important;
  max-width: 680px !important;
  color: #101115 !important;
  font-size: clamp(18px, 4.5vw, 25px) !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  white-space: normal;
}

.msf-reactions-panel {
  max-width: 760px !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, #f8f2ed, #ead8cb 48%, #d9bda9) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.10) !important;
}

.msf-reactions-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.msf-reaction-card {
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  text-align: left;
  box-shadow: 0 7px 18px rgba(0,0,0,.08);
}

.msf-reaction-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: #59402d;
  font-size: 14px;
}

.msf-reaction-card p {
  margin: 0;
  color: #151515;
  font-size: 17px;
  line-height: 1.45;
}

@media (max-width: 620px) {
  .msf-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .msf-tabs button,
  .msf-tabs span {
    min-height: 44px;
    font-size: 13px;
    border-radius: 16px !important;
  }

  .msf-timeline-item {
    grid-template-columns: 62px 54px minmax(0, 1fr);
    gap: 10px !important;
    padding-bottom: 24px !important;
  }

  .msf-timeline-item:not(:last-child)::after {
    left: 89px;
    top: 48px;
  }

  .msf-timeline-icon {
    width: 48px !important;
    height: 48px !important;
  }

  .msf-line-icon {
    width: 42px;
    height: 42px;
  }

  .msf-menu-ornament span::before,
  .msf-menu-ornament span::after {
    width: 105px;
  }

  .msf-reaction-meta {
    display: block;
  }
}


/* v18: vaste onderbalk zoals app-navigatie */
.msf-app {
  padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important;
}

.msf-tabs {
  position: fixed !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 99999 !important;
  width: 100vw !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 0 env(safe-area-inset-bottom) 0 !important;
  overflow: visible !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 -10px 28px rgba(0,0,0,.14) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.msf-tabs button,
.msf-tabs span {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 78px !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 9px 4px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: #ffffff !important;
  color: #2b2b2f !important;
  border: 0 !important;
  border-right: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: none !important;
  font-size: clamp(11px, 2.6vw, 15px) !important;
  line-height: 1.1 !important;
  font-weight: 650 !important;
  white-space: normal !important;
  text-align: center !important;
}

.msf-tabs button:last-child,
.msf-tabs span:last-child {
  border-right: 0 !important;
}

.msf-tabs button::before,
.msf-tabs span::before {
  display: block;
  font-size: clamp(19px, 4.6vw, 25px);
  line-height: 1;
  margin-bottom: 1px;
  font-weight: 400;
}

.msf-tabs button[data-msf-tab="gallery"]::before { content: "▣"; }
.msf-tabs button[data-msf-tab="timeline"]::before { content: "□"; }
.msf-tabs button[data-msf-tab="menu"]::before { content: "☰"; }
.msf-tabs button[data-msf-tab="message"]::before { content: "✎"; }
.msf-tabs button[data-msf-tab="bingo"]::before { content: "▦"; }

.msf-tabs .active {
  background: #111216 !important;
  color: #ffffff !important;
}

@media (min-width: 900px) {
  .msf-tabs button,
  .msf-tabs span {
    min-height: 82px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 420px) {
  .msf-tabs button,
  .msf-tabs span {
    min-height: 70px !important;
    padding: 8px 2px 7px !important;
    font-size: 11px !important;
  }
}

/* v19: laatste aanpassingen gastenpagina, menu en fotobingo */
.msf-app.msf-tab-timeline .msf-hero,
.msf-app.msf-tab-menu .msf-hero,
.msf-app.msf-tab-message .msf-hero,
.msf-app.msf-tab-bingo .msf-hero {
  display: none !important;
}

.msf-gallery-header h2 {
  font-size: 20px !important;
  font-weight: 750 !important;
}

.msf-download,
.msf-beamer-download {
  display: none !important;
}

.msf-tabs button,
.msf-tabs span {
  min-height: 64px !important;
  padding: 7px 2px 6px !important;
  font-size: clamp(8.5px, 2.15vw, 12px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

.msf-tabs button::before,
.msf-tabs span::before {
  font-size: clamp(15px, 3.7vw, 20px) !important;
  margin-bottom: 0 !important;
}

@media (min-width: 900px) {
  .msf-tabs button,
  .msf-tabs span {
    min-height: 70px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 420px) {
  .msf-tabs button,
  .msf-tabs span {
    min-height: 58px !important;
    padding: 6px 1px 5px !important;
    font-size: 8.5px !important;
  }
}

.msf-timeline-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.msf-timeline-list {
  width: min(560px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.msf-menu-list {
  gap: 34px !important;
}

.msf-menu-item + .msf-menu-item {
  margin-top: 12px !important;
}

.msf-menu-item h3 {
  margin-bottom: 20px !important;
}

.msf-menu-item p {
  line-height: 1.72 !important;
}

.msf-menu-line {
  display: block;
  margin: 0 0 5px;
}

.msf-bingo-start {
  max-width: 520px;
  margin: 12px auto 16px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  text-align: left;
}

.msf-bingo-start[hidden],
.msf-bingo-player[hidden] {
  display: none !important;
}

.msf-bingo-start label span {
  display: block;
  margin-bottom: 7px;
  font-weight: 800;
}

.msf-bingo-start-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.msf-bingo-start input {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 16px;
  padding: 12px 13px;
  font: inherit;
  background: #fff;
}

.msf-bingo-start button {
  border: 0;
  border-radius: 16px;
  padding: 12px 15px;
  background: #111216;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.msf-bingo-start p {
  margin: 9px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: rgba(0,0,0,.62) !important;
}

.msf-bingo-player {
  margin: 0 auto 10px;
  max-width: 520px;
  text-align: center;
  color: #5b514b;
  font-size: 13px;
  font-weight: 700;
}

.msf-bingo-card[hidden] {
  display: none !important;
}

.msf-bingo-card {
  gap: 7px !important;
}

.msf-bingo-square {
  min-height: 96px !important;
  padding: 8px 5px !important;
  font-family: Georgia, "Times New Roman", serif !important;
  background: rgba(255,255,255,.86) !important;
}

.msf-bingo-upload {
  display: none !important;
}

.msf-bingo-text {
  position: relative;
  z-index: 2;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(8px, 2vw, 12px) !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.msf-bingo-square.has-photo .msf-bingo-text {
  font-size: clamp(7px, 1.75vw, 10px) !important;
  line-height: 1.05 !important;
  background: rgba(255,255,255,.78) !important;
  padding: 4px 5px !important;
  border-radius: 9px !important;
}

.msf-bingo-check {
  width: 24px !important;
  height: 24px !important;
  font-size: 15px !important;
}

.msf-bingo-message.is-complete {
  background: #eaf8ee !important;
  color: #17672d !important;
  border-radius: 18px !important;
  padding: 14px !important;
}

@media (max-width: 520px) {
  .msf-bingo-start-row {
    grid-template-columns: 1fr;
  }

  .msf-bingo-square {
    min-height: 86px !important;
  }
}

/* v20: geen galerij-kop, aparte bingo-ranglijst en eind-popup */
.msf-gallery-header {
  display: none !important;
}

.msf-panel[data-msf-panel="gallery"] {
  margin-top: 18px !important;
}

.msf-bingo-result-modal[hidden] {
  display: none !important;
}

.msf-bingo-result-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.msf-bingo-result-modal-card {
  position: relative;
  width: min(460px, 94vw);
  max-height: 88vh;
  overflow: auto;
  border-radius: 28px;
  padding: 28px 22px 24px;
  background: #fffaf6;
  box-shadow: 0 22px 70px rgba(0,0,0,.34);
  text-align: center;
  color: #161616;
}

.msf-bingo-result-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: #111;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.msf-bingo-result-emoji {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 10px;
}

.msf-bingo-result-modal-card h3 {
  margin: 0 0 10px;
  font-size: clamp(28px, 7vw, 44px);
  line-height: 1;
}

.msf-bingo-result-body p {
  margin: 9px auto;
  font-size: 17px;
  line-height: 1.35;
}

.msf-bingo-result-top {
  margin-top: 18px;
  text-align: left;
}

.msf-bingo-result-top h4 {
  margin: 0 0 10px;
  text-align: center;
  font-size: 16px;
}

.msf-bingo-result-row,
.msf-bingo-result-card {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.045);
  margin-top: 7px;
}

.msf-bingo-result-row span,
.msf-bingo-result-rank {
  font-weight: 900;
  font-size: 18px;
}

.msf-bingo-result-row strong,
.msf-bingo-result-content strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msf-bingo-result-row em {
  font-style: normal;
  font-size: 13px;
  color: rgba(0,0,0,.64);
  white-space: nowrap;
}

.msf-bingo-results-panel {
  max-width: 620px;
  margin: 0 auto;
}

.msf-bingo-results-list {
  display: grid;
  gap: 9px;
}

.msf-bingo-result-card {
  grid-template-columns: 54px minmax(0, 1fr);
  text-align: left;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}

.msf-bingo-result-content {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.msf-bingo-result-content span {
  font-weight: 800;
}

.msf-bingo-result-content small {
  color: rgba(0,0,0,.56);
}

@media (max-width: 480px) {
  .msf-bingo-result-row {
    grid-template-columns: 38px minmax(0,1fr);
  }
  .msf-bingo-result-row em {
    grid-column: 2;
  }
}

/* v21: mobiele logo-correctie, onderbalk in één regel en uploadblok geforceerd weg buiten galerij */
.msf-hero[hidden] {
  display: none !important;
}

.msf-app.msf-tab-timeline > .msf-hero,
.msf-app.msf-tab-menu > .msf-hero,
.msf-app.msf-tab-message > .msf-hero,
.msf-app.msf-tab-bingo > .msf-hero {
  display: none !important;
}

.msf-tabs button,
.msf-tabs span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  font-size: clamp(10px, 2.45vw, 12px) !important;
  line-height: 1 !important;
}

.msf-tabs button::before,
.msf-tabs span::before {
  flex: 0 0 auto;
}

@media (max-width: 420px) {
  .msf-tabs button,
  .msf-tabs span {
    font-size: 10px !important;
    letter-spacing: -.01em !important;
  }
}

@media (max-width: 720px) {
  .msf-beamer-logo {
    width: clamp(78px, 22vw, 126px) !important;
    height: clamp(78px, 22vw, 126px) !important;
  }
  .msf-beamer-logo-small {
    width: clamp(68px, 19vw, 112px) !important;
    height: clamp(68px, 19vw, 112px) !important;
  }
}

/* v23: bingo-foto's ook in galerij, dashboard-instelbare teksten/logo en extra center-correcties */
.msf-beamer-logo {
  width: var(--msf-beamer-logo-size, 130px) !important;
  height: var(--msf-beamer-logo-size, 130px) !important;
}

.msf-beamer-logo-small {
  width: var(--msf-beamer-slide-logo-size, 104px) !important;
  height: var(--msf-beamer-slide-logo-size, 104px) !important;
}

@media (max-width: 720px) {
  .msf-beamer-logo {
    width: var(--msf-beamer-logo-mobile-size, 64px) !important;
    height: var(--msf-beamer-logo-mobile-size, 64px) !important;
  }
  .msf-beamer-logo-small {
    width: var(--msf-beamer-slide-logo-mobile-size, 56px) !important;
    height: var(--msf-beamer-slide-logo-mobile-size, 56px) !important;
  }
}

.msf-bingo-square::before {
  background-image: var(--msf-bingo-logo-url) !important;
  background-size: var(--msf-bingo-logo-size, 72%) !important;
  opacity: var(--msf-bingo-logo-opacity, .10) !important;
  inset: 10% !important;
}

.msf-bingo-square.has-photo::before,
.msf-bingo-square.is-done.has-photo::before {
  opacity: 0 !important;
}

.msf-timeline-panel,
.msf-timeline-panel .msf-info-header {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.msf-timeline-list {
  width: min(540px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-items: center !important;
}

.msf-timeline-item {
  width: min(500px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: 92px 54px minmax(0, 230px) !important;
  justify-content: center !important;
}

.msf-timeline-time {
  text-align: right !important;
}

.msf-timeline-text {
  text-align: left !important;
}

@media (max-width: 520px) {
  .msf-timeline-item {
    grid-template-columns: 72px 44px minmax(0, 1fr) !important;
  }
}

/* v24: gouden menu, gecentreerde tijdlijn, bewerkbare onderbalk en nette fotowand-deck */
:root {
  --msf-gold: #b08a62;
}

.msf-tabs button::before,
.msf-tabs span::before {
  content: none !important;
  display: none !important;
}

.msf-tabs button,
.msf-tabs span {
  gap: 3px !important;
}

.msf-tab-icon {
  display: block !important;
  font-size: clamp(15px, 3.6vw, 21px) !important;
  line-height: 1 !important;
  height: 1em !important;
  font-weight: 400 !important;
}

.msf-tab-label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.05 !important;
}

@media (max-width: 420px) {
  .msf-tab-icon {
    font-size: 15px !important;
  }
  .msf-tab-label {
    font-size: 8.5px !important;
  }
}

.msf-timeline-panel {
  align-items: center !important;
  text-align: center !important;
}

.msf-timeline-list {
  max-width: min(520px, 100%) !important;
  width: min(520px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.msf-timeline-item {
  grid-template-columns: 1fr 72px 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 14px !important;
}

.msf-timeline-item:not(:last-child)::after {
  display: none !important;
  content: none !important;
}

.msf-timeline-time,
.msf-timeline-icon,
.msf-timeline-text {
  justify-self: center !important;
  text-align: center !important;
}

.msf-timeline-text {
  width: 100% !important;
}

.msf-menu-card,
.msf-menu-script-title,
.msf-menu-item h3,
.msf-menu-item p {
  color: var(--msf-gold) !important;
}

.msf-menu-ornament span::before,
.msf-menu-ornament span::after {
  border-top-color: var(--msf-gold) !important;
}

.msf-menu-item h3 {
  color: var(--msf-gold) !important;
}

.msf-menu-item p,
.msf-menu-line {
  color: var(--msf-gold) !important;
}

@media (max-width: 560px) {
  .msf-timeline-item {
    grid-template-columns: 1fr 58px 1fr !important;
    gap: 9px !important;
  }
  .msf-timeline-time {
    font-size: 17px !important;
  }
  .msf-timeline-text {
    font-size: 18px !important;
  }
}


/* v25: dashboard-tabbladen, nette onderbalk, menukop goud en menu-tekst normaal */
:root {
  --msf-gold: #b08a62;
}

/* Onderbalk terug naar rustige vaste blokken, maar met aanpasbare tekst/icoon uit Fotobox */
.msf-tabs {
  position: fixed !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 99999 !important;
  width: 100vw !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 0 env(safe-area-inset-bottom) 0 !important;
  background: #fffaf7 !important;
  border-top: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 -10px 26px rgba(0,0,0,.12) !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

.msf-tabs button,
.msf-tabs span {
  appearance: none !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 66px !important;
  border: 0 !important;
  border-right: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 0 !important;
  padding: 7px 2px 6px !important;
  background: #fffaf7 !important;
  color: #262323 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.msf-tabs button:last-child,
.msf-tabs span:last-child { border-right: 0 !important; }

.msf-tabs button::before,
.msf-tabs span::before {
  content: none !important;
  display: none !important;
}

.msf-tab-icon {
  display: block !important;
  font-size: 18px !important;
  line-height: 1 !important;
  height: 20px !important;
  font-weight: 400 !important;
}

.msf-tab-label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.msf-tabs .active {
  background: #151515 !important;
  color: #ffffff !important;
}

@media (max-width: 420px) {
  .msf-tabs button,
  .msf-tabs span {
    min-height: 60px !important;
    font-size: 10px !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
  }
  .msf-tab-icon { font-size: 16px !important; height: 18px !important; }
  .msf-tab-label { font-size: 9.5px !important; }
}

/* Menu: alleen koppen goud, omschrijving weer donker/normaal */
.msf-menu-script-title,
.msf-menu-item h3 {
  color: var(--msf-gold) !important;
}

.msf-menu-card,
.msf-menu-item p,
.msf-menu-line {
  color: #101115 !important;
}

.msf-menu-ornament span::before,
.msf-menu-ornament span::after {
  border-top-color: var(--msf-gold) !important;
}

/* Tijdlijn echt gecentreerd, zonder verbindingsstreepjes */
.msf-timeline-panel,
.msf-timeline-panel .msf-info-header,
.msf-timeline-list {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.msf-timeline-list {
  width: min(520px, 100%) !important;
  display: grid !important;
  justify-content: center !important;
}

.msf-timeline-item {
  width: 100% !important;
  max-width: 460px !important;
  display: grid !important;
  grid-template-columns: 92px 58px 190px !important;
  justify-content: center !important;
  justify-items: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 10px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.msf-timeline-item:not(:last-child)::after {
  display: none !important;
  content: none !important;
}

.msf-timeline-time,
.msf-timeline-icon,
.msf-timeline-text {
  justify-self: center !important;
  text-align: center !important;
}

@media (max-width: 520px) {
  .msf-timeline-item {
    grid-template-columns: 72px 46px 150px !important;
    max-width: 330px !important;
    gap: 7px !important;
  }
  .msf-timeline-text { font-size: 17px !important; }
}


/* v26: onderbalk terug naar één strak blok per knop + meer eenheid tussen pagina's */
.msf-tabs {
  background: #ffffff !important;
  border-top: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 -8px 24px rgba(0,0,0,.12) !important;
  overflow: hidden !important;
}

.msf-tabs > button {
  position: relative !important;
  appearance: none !important;
  min-height: 68px !important;
  height: 68px !important;
  padding: 7px 2px 6px !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #222 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.msf-tabs > button:last-child { border-right: 0 !important; }

.msf-tabs > button.active,
.msf-tabs > button[aria-selected="true"] {
  background: #111216 !important;
  color: #ffffff !important;
}

.msf-tabs > button > .msf-tab-icon,
.msf-tabs > button > .msf-tab-label {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  display: block !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.msf-tabs > button > .msf-tab-icon {
  font-size: 18px !important;
  line-height: 1 !important;
  height: 20px !important;
  font-weight: 400 !important;
}

.msf-tabs > button > .msf-tab-label {
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 420px) {
  .msf-tabs > button {
    min-height: 62px !important;
    height: 62px !important;
    padding: 6px 1px 5px !important;
  }
  .msf-tabs > button > .msf-tab-icon {
    font-size: 16px !important;
    height: 18px !important;
  }
  .msf-tabs > button > .msf-tab-label {
    font-size: 9.5px !important;
  }
}

/* Zelfde basisafstand/centrering voor alle onderdelen */
.msf-panel[data-msf-panel="timeline"],
.msf-panel[data-msf-panel="menu"],
.msf-panel[data-msf-panel="message"],
.msf-panel[data-msf-panel="bingo"] {
  padding-top: 14px !important;
}

.msf-info-panel,
.msf-bingo {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Tijdlijn blijft gecentreerd maar zonder verbindingslijn */
.msf-timeline-panel .msf-info-header,
.msf-timeline-panel .msf-timeline-list,
.msf-timeline-panel .msf-timeline-item,
.msf-timeline-time,
.msf-timeline-icon,
.msf-timeline-text {
  text-align: center !important;
}

.msf-timeline-item:not(:last-child)::after,
.msf-timeline-icon::after,
.msf-timeline-icon::before {
  display: none !important;
  content: none !important;
}

/* v27: clean lightbox buttons, uniform dark subpages, configurable page logo and typography */
.msf-lightbox-close,
.msf-lightbox-nav,
.msf-bingo-result-close {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.85) !important;
  width: auto !important;
  height: auto !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 4px 10px !important;
}

.msf-lightbox-nav {
  font-size: clamp(42px, 7vw, 76px) !important;
  line-height: .8 !important;
}

.msf-lightbox-close,
.msf-bingo-result-close {
  font-size: clamp(32px, 5vw, 52px) !important;
  line-height: 1 !important;
}

.msf-lightbox-count {
  display: none !important;
}

.msf-info-panel,
.msf-bingo,
.msf-reactions-panel,
.msf-bingo-results-panel {
  background: #111216 !important;
  color: #fff !important;
  border-radius: 28px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.18) !important;
}

.msf-info-header,
.msf-section-header,
.msf-bingo-header {
  color: #fff !important;
}

.msf-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 auto 22px !important;
  max-width: 680px !important;
  text-align: center !important;
}

.msf-section-logo-none .msf-section-logo { display: none !important; }
.msf-section-logo-left { justify-content: center !important; }
.msf-section-logo-right { flex-direction: row-reverse !important; }
.msf-section-logo-top { flex-direction: column !important; gap: 8px !important; }

.msf-section-logo {
  width: var(--msf-page-logo-size, 42px) !important;
  height: auto !important;
  max-height: var(--msf-page-logo-size, 42px) !important;
  object-fit: contain !important;
  display: block !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.msf-section-textblock {
  min-width: 0 !important;
}

.msf-section-title,
.msf-info-header h2,
.msf-bingo-header h2 {
  font-size: var(--msf-section-title-size, 34px) !important;
  font-weight: var(--msf-section-title-weight, 850) !important;
  text-decoration: var(--msf-section-title-decoration, none) !important;
  color: #fff !important;
  margin: 0 !important;
  line-height: 1.05 !important;
}

.msf-section-intro,
.msf-info-header p,
.msf-bingo-header p {
  color: rgba(255,255,255,.78) !important;
}

.msf-kicker {
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.78) !important;
}

.msf-timeline-panel .msf-timeline-list {
  max-width: 560px !important;
}

.msf-timeline-item {
  grid-template-columns: 1fr 64px 1fr !important;
  color: #fff !important;
}

.msf-timeline-time,
.msf-timeline-text,
.msf-timeline-icon {
  color: #fff !important;
  text-align: center !important;
}

.msf-timeline-text {
  font-size: var(--msf-timeline-text-size, 22px) !important;
  font-weight: var(--msf-timeline-text-weight, 500) !important;
  text-decoration: var(--msf-timeline-text-decoration, none) !important;
}

.msf-line-icon path,
.msf-line-icon circle {
  stroke: currentColor !important;
}

.msf-menu-script-title,
.msf-menu-item h3 {
  color: var(--msf-gold, #b08a62) !important;
  font-size: var(--msf-menu-heading-size, 34px) !important;
  font-weight: var(--msf-menu-heading-weight, 600) !important;
  text-decoration: var(--msf-menu-heading-decoration, none) !important;
}

.msf-menu-card,
.msf-menu-item p,
.msf-menu-line {
  color: rgba(255,255,255,.90) !important;
  font-size: var(--msf-menu-body-size, 22px) !important;
  font-weight: var(--msf-menu-body-weight, 400) !important;
  text-decoration: var(--msf-menu-body-decoration, none) !important;
}

.msf-menu-ornament span::before,
.msf-menu-ornament span::after {
  border-top-color: var(--msf-gold, #b08a62) !important;
}

.msf-message-form,
.msf-message-form label,
.msf-message-form small,
.msf-message-status {
  color: #fff !important;
  font-size: var(--msf-message-body-size, 16px) !important;
  font-weight: var(--msf-message-body-weight, 400) !important;
  text-decoration: var(--msf-message-body-decoration, none) !important;
}

.msf-message-form input,
.msf-message-form textarea {
  background: #fff !important;
  color: #111 !important;
}

.msf-bingo-start,
.msf-bingo-message,
.msf-bingo-player {
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.86) !important;
  box-shadow: none !important;
}

.msf-bingo-square {
  background: rgba(255,255,255,.92) !important;
}

.msf-bingo-text {
  font-size: var(--msf-bingo-text-size, 11px) !important;
  font-weight: var(--msf-bingo-text-weight, 500) !important;
  text-decoration: var(--msf-bingo-text-decoration, none) !important;
}

.msf-tab-label {
  font-size: var(--msf-nav-label-size, 11px) !important;
  font-weight: var(--msf-nav-label-weight, 700) !important;
  text-decoration: var(--msf-nav-label-decoration, none) !important;
}

@media (max-width: 720px) {
  .msf-section-logo {
    width: var(--msf-page-logo-mobile-size, 30px) !important;
    max-height: var(--msf-page-logo-mobile-size, 30px) !important;
  }
  .msf-section-header {
    gap: 8px !important;
    margin-bottom: 18px !important;
  }
  .msf-timeline-item {
    grid-template-columns: 1fr 50px 1fr !important;
  }
}

/* v28: donkere volledige fotobox, nette app-onderbalk, logo helemaal links en consistente onderdelen */
.msf-app {
  background: #101115 !important;
  color: #ffffff !important;
  min-height: 100vh !important;
  box-shadow: 0 0 0 100vmax #101115 !important;
  clip-path: inset(0 -100vmax) !important;
}

.msf-hero {
  background: #14161c !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.34) !important;
}

.msf-hero p,
.msf-help,
.msf-status {
  color: rgba(255,255,255,.82) !important;
}

.msf-upload-button {
  background: #ffffff !important;
  color: #111216 !important;
}

.msf-panel,
.msf-panel.active,
.msf-panel[data-msf-panel="gallery"],
.msf-gallery {
  background: #101115 !important;
  color: #ffffff !important;
}

.msf-gallery-header,
.msf-gallery-header h2,
.msf-gallery-actions {
  display: none !important;
}

/* Onderbalk: exact één blok per knop. De span-selectors uit oudere versies worden hier overschreven. */
.msf-tabs {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 99999 !important;
  width: 100vw !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 0 env(safe-area-inset-bottom) !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 -10px 28px rgba(0,0,0,.18) !important;
}

.msf-tabs > button {
  appearance: none !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 66px !important;
  height: 66px !important;
  margin: 0 !important;
  padding: 7px 2px 6px !important;
  border: 0 !important;
  border-right: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
  color: #24242a !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
  overflow: hidden !important;
}

.msf-tabs > button:last-child { border-right: 0 !important; }
.msf-tabs > button.active { background: #111216 !important; color: #ffffff !important; }
.msf-tabs > button::before { content: none !important; display: none !important; }

.msf-tabs > button > .msf-tab-icon,
.msf-tabs > button > .msf-tab-label {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: inherit !important;
  display: block !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.05 !important;
}

.msf-tabs > button > .msf-tab-icon {
  font-size: 20px !important;
  font-weight: 400 !important;
}

.msf-tabs > button > .msf-tab-label {
  font-size: var(--msf-nav-label-size, 11px) !important;
  font-weight: var(--msf-nav-label-weight, 700) !important;
  text-decoration: var(--msf-nav-label-decoration, none) !important;
}

@media (max-width: 420px) {
  .msf-tabs > button { min-height: 60px !important; height: 60px !important; }
  .msf-tabs > button > .msf-tab-icon { font-size: 17px !important; }
  .msf-tabs > button > .msf-tab-label { font-size: min(var(--msf-nav-label-size, 11px), 10px) !important; }
}

/* Logo bij onderdelen: helemaal links; tekst blijft gecentreerd. */
.msf-section-header {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  text-align: center !important;
  padding-left: calc(var(--msf-page-logo-size, 42px) + 18px) !important;
  padding-right: calc(var(--msf-page-logo-size, 42px) + 18px) !important;
  min-height: calc(var(--msf-page-logo-size, 42px) + 4px) !important;
}

.msf-section-logo-left .msf-section-logo,
.msf-section-logo-edge-left .msf-section-logo {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: var(--msf-page-logo-size, 42px) !important;
  max-height: var(--msf-page-logo-size, 42px) !important;
}

.msf-section-logo-top {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.msf-section-logo-right .msf-section-logo {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.msf-section-textblock {
  text-align: center !important;
  margin: 0 auto !important;
}

@media (max-width: 720px) {
  .msf-section-header {
    padding-left: calc(var(--msf-page-logo-mobile-size, 30px) + 10px) !important;
    padding-right: calc(var(--msf-page-logo-mobile-size, 30px) + 10px) !important;
    min-height: calc(var(--msf-page-logo-mobile-size, 30px) + 4px) !important;
  }
  .msf-section-logo-left .msf-section-logo,
  .msf-section-logo-edge-left .msf-section-logo,
  .msf-section-logo-right .msf-section-logo {
    width: var(--msf-page-logo-mobile-size, 30px) !important;
    max-height: var(--msf-page-logo-mobile-size, 30px) !important;
  }
}

/* Tijdlijn: tijd, pictogram en tekst gecentreerd, zonder lijn/streepjes. */
.msf-timeline-list {
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.msf-timeline-item {
  display: grid !important;
  grid-template-columns: 130px 86px 130px !important;
  justify-content: center !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: center !important;
}

.msf-timeline-time,
.msf-timeline-icon,
.msf-timeline-text {
  justify-self: center !important;
  text-align: center !important;
}

.msf-timeline-item::before,
.msf-timeline-item::after,
.msf-timeline-icon::before,
.msf-timeline-icon::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 520px) {
  .msf-timeline-item {
    grid-template-columns: 78px 58px 98px !important;
    gap: 7px !important;
  }
}

/* Menu: alleen koppen goud, tekst daaronder gewoon licht/donker leesbaar op donkere kaart. */
.msf-menu-script-title,
.msf-menu-item h3 {
  color: var(--msf-gold, #b08a62) !important;
}

.msf-menu-item p,
.msf-menu-line {
  color: rgba(255,255,255,.90) !important;
}

/* Minder losse afwijkingen tussen Tijdlijn/Menu/Bericht/Bingo. */
.msf-info-panel,
.msf-bingo,
.msf-reactions-panel,
.msf-bingo-results-panel {
  background: #14161c !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

/* v29: uitgebreide tekstopmaak per onderdeel + gecentreerde bingo-start */
.msf-hero .msf-kicker {
  font-size: var(--msf-gallery-kicker-size, 14px) !important;
  font-weight: var(--msf-gallery-kicker-weight, 700) !important;
  font-style: var(--msf-gallery-kicker-style, normal) !important;
  text-decoration: var(--msf-gallery-kicker-decoration, none) !important;
  color: var(--msf-gallery-kicker-color, rgba(255,255,255,.78)) !important;
}
.msf-hero h1 {
  font-size: var(--msf-gallery-title-size, 40px) !important;
  font-weight: var(--msf-gallery-title-weight, 850) !important;
  font-style: var(--msf-gallery-title-style, normal) !important;
  text-decoration: var(--msf-gallery-title-decoration, none) !important;
  color: var(--msf-gallery-title-color, #fff) !important;
}
.msf-hero p {
  font-size: var(--msf-gallery-description-size, 17px) !important;
  font-weight: var(--msf-gallery-description-weight, 400) !important;
  font-style: var(--msf-gallery-description-style, normal) !important;
  text-decoration: var(--msf-gallery-description-decoration, none) !important;
  color: var(--msf-gallery-description-color, rgba(255,255,255,.82)) !important;
}
.msf-upload-button {
  font-size: var(--msf-upload-button-size, 18px) !important;
  font-weight: var(--msf-upload-button-weight, 800) !important;
  font-style: var(--msf-upload-button-style, normal) !important;
  text-decoration: var(--msf-upload-button-decoration, none) !important;
  color: var(--msf-upload-button-color, #111216) !important;
}
.msf-help {
  font-size: var(--msf-upload-tip-size, 13px) !important;
  font-weight: var(--msf-upload-tip-weight, 400) !important;
  font-style: var(--msf-upload-tip-style, normal) !important;
  text-decoration: var(--msf-upload-tip-decoration, none) !important;
  color: var(--msf-upload-tip-color, rgba(255,255,255,.82)) !important;
}

.msf-section-timeline .msf-kicker { font-size: var(--msf-timeline-kicker-size, 14px) !important; font-weight: var(--msf-timeline-kicker-weight, 700) !important; font-style: var(--msf-timeline-kicker-style, normal) !important; text-decoration: var(--msf-timeline-kicker-decoration, none) !important; color: var(--msf-timeline-kicker-color, rgba(255,255,255,.78)) !important; }
.msf-section-timeline .msf-section-title { font-size: var(--msf-timeline-title-size, 34px) !important; font-weight: var(--msf-timeline-title-weight, 850) !important; font-style: var(--msf-timeline-title-style, normal) !important; text-decoration: var(--msf-timeline-title-decoration, none) !important; color: var(--msf-timeline-title-color, #fff) !important; }
.msf-timeline-time { font-size: var(--msf-timeline-time-size, 22px) !important; font-weight: var(--msf-timeline-time-weight, 700) !important; font-style: var(--msf-timeline-time-style, normal) !important; text-decoration: var(--msf-timeline-time-decoration, none) !important; color: var(--msf-timeline-time-color, #fff) !important; }
.msf-timeline-text { font-size: var(--msf-timeline-text-size, 22px) !important; font-weight: var(--msf-timeline-text-weight, 400) !important; font-style: var(--msf-timeline-text-style, normal) !important; text-decoration: var(--msf-timeline-text-decoration, none) !important; color: var(--msf-timeline-text-color, #fff) !important; }

.msf-menu-script-title { font-size: var(--msf-menu-title-size, 38px) !important; font-weight: var(--msf-menu-title-weight, 700) !important; font-style: var(--msf-menu-title-style, normal) !important; text-decoration: var(--msf-menu-title-decoration, none) !important; color: var(--msf-menu-title-color, var(--msf-gold, #b08a62)) !important; }
.msf-menu-item h3 { font-size: var(--msf-menu-heading-size, 34px) !important; font-weight: var(--msf-menu-heading-weight, 700) !important; font-style: var(--msf-menu-heading-style, normal) !important; text-decoration: var(--msf-menu-heading-decoration, none) !important; color: var(--msf-menu-heading-color, var(--msf-gold, #b08a62)) !important; }
.msf-menu-item p, .msf-menu-line { font-size: var(--msf-menu-body-size, 22px) !important; font-weight: var(--msf-menu-body-weight, 400) !important; font-style: var(--msf-menu-body-style, normal) !important; text-decoration: var(--msf-menu-body-decoration, none) !important; color: var(--msf-menu-body-color, rgba(255,255,255,.90)) !important; }

.msf-section-message .msf-kicker { font-size: var(--msf-message-kicker-size, 14px) !important; font-weight: var(--msf-message-kicker-weight, 700) !important; font-style: var(--msf-message-kicker-style, normal) !important; text-decoration: var(--msf-message-kicker-decoration, none) !important; color: var(--msf-message-kicker-color, rgba(255,255,255,.78)) !important; }
.msf-section-message .msf-section-title { font-size: var(--msf-message-title-size, 34px) !important; font-weight: var(--msf-message-title-weight, 850) !important; font-style: var(--msf-message-title-style, normal) !important; text-decoration: var(--msf-message-title-decoration, none) !important; color: var(--msf-message-title-color, #fff) !important; }
.msf-section-message .msf-section-intro { font-size: var(--msf-message-intro-size, 16px) !important; font-weight: var(--msf-message-intro-weight, 400) !important; font-style: var(--msf-message-intro-style, normal) !important; text-decoration: var(--msf-message-intro-decoration, none) !important; color: var(--msf-message-intro-color, rgba(255,255,255,.78)) !important; }
.msf-message-form label, .msf-message-form input, .msf-message-form textarea { font-size: var(--msf-message-label-size, 16px) !important; font-weight: var(--msf-message-label-weight, 400) !important; font-style: var(--msf-message-label-style, normal) !important; text-decoration: var(--msf-message-label-decoration, none) !important; }
.msf-message-form label { color: var(--msf-message-label-color, #fff) !important; }
.msf-message-form button { font-size: var(--msf-message-button-size, 16px) !important; font-weight: var(--msf-message-button-weight, 800) !important; font-style: var(--msf-message-button-style, normal) !important; text-decoration: var(--msf-message-button-decoration, none) !important; color: var(--msf-message-button-color, #111216) !important; }

.msf-section-bingo .msf-kicker { font-size: var(--msf-bingo-kicker-size, 14px) !important; font-weight: var(--msf-bingo-kicker-weight, 700) !important; font-style: var(--msf-bingo-kicker-style, normal) !important; text-decoration: var(--msf-bingo-kicker-decoration, none) !important; color: var(--msf-bingo-kicker-color, rgba(255,255,255,.78)) !important; }
.msf-section-bingo .msf-section-title { font-size: var(--msf-bingo-title-size, 34px) !important; font-weight: var(--msf-bingo-title-weight, 850) !important; font-style: var(--msf-bingo-title-style, normal) !important; text-decoration: var(--msf-bingo-title-decoration, none) !important; color: var(--msf-bingo-title-color, #fff) !important; }
.msf-section-bingo .msf-section-intro { font-size: var(--msf-bingo-intro-size, 16px) !important; font-weight: var(--msf-bingo-intro-weight, 400) !important; font-style: var(--msf-bingo-intro-style, normal) !important; text-decoration: var(--msf-bingo-intro-decoration, none) !important; color: var(--msf-bingo-intro-color, rgba(255,255,255,.78)) !important; }
.msf-bingo-start { text-align: center !important; }
.msf-bingo-start label span { font-size: var(--msf-bingo-name-label-size, 16px) !important; font-weight: var(--msf-bingo-name-label-weight, 700) !important; font-style: var(--msf-bingo-name-label-style, normal) !important; text-decoration: var(--msf-bingo-name-label-decoration, none) !important; color: var(--msf-bingo-name-label-color, #fff) !important; }
#msf-bingo-start-button { font-size: var(--msf-bingo-start-button-size, 16px) !important; font-weight: var(--msf-bingo-start-button-weight, 800) !important; font-style: var(--msf-bingo-start-button-style, normal) !important; text-decoration: var(--msf-bingo-start-button-decoration, none) !important; color: var(--msf-bingo-start-button-color, #111216) !important; }
.msf-bingo-start p { text-align: center !important; font-size: var(--msf-bingo-note-size, 13px) !important; font-weight: var(--msf-bingo-note-weight, 400) !important; font-style: var(--msf-bingo-note-style, normal) !important; text-decoration: var(--msf-bingo-note-decoration, none) !important; color: var(--msf-bingo-note-color, rgba(255,255,255,.72)) !important; margin-left: auto !important; margin-right: auto !important; }
.msf-bingo-text { font-size: var(--msf-bingo-text-size, 11px) !important; font-weight: var(--msf-bingo-text-weight, 400) !important; font-style: var(--msf-bingo-text-style, normal) !important; text-decoration: var(--msf-bingo-text-decoration, none) !important; color: var(--msf-bingo-text-color, #111216) !important; }
.msf-tab-label { color: var(--msf-nav-label-color, inherit) !important; font-style: var(--msf-nav-label-style, normal) !important; }

/* v30: dynamische onderbalk, zichtbaarheid per moment, betere koppen/logo en reset-vriendelijke layout */
.msf-tabs {
  grid-template-columns: repeat(var(--msf-nav-count, 5), minmax(0, 1fr)) !important;
}

/* Als onderdelen verborgen zijn, worden de resterende knoppen automatisch verdeeld. */
.msf-tabs > button {
  min-width: 0 !important;
}

/* Logo bij Foto's/hero */
.msf-hero-header {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: calc(var(--msf-page-logo-size, 42px) + 4px) !important;
  padding-left: calc(var(--msf-page-logo-size, 42px) + 16px) !important;
  padding-right: calc(var(--msf-page-logo-size, 42px) + 16px) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  margin: 0 auto 10px !important;
}

.msf-hero-logo {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: var(--msf-page-logo-size, 42px) !important;
  max-height: var(--msf-page-logo-size, 42px) !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.msf-section-logo-none .msf-hero-logo { display: none !important; }
.msf-hero-textblock { text-align: center !important; }

@media (max-width: 720px) {
  .msf-hero-header {
    min-height: calc(var(--msf-page-logo-mobile-size, 30px) + 4px) !important;
    padding-left: calc(var(--msf-page-logo-mobile-size, 30px) + 10px) !important;
    padding-right: calc(var(--msf-page-logo-mobile-size, 30px) + 10px) !important;
  }
  .msf-hero-logo {
    width: var(--msf-page-logo-mobile-size, 30px) !important;
    max-height: var(--msf-page-logo-mobile-size, 30px) !important;
  }
}

/* Zorg dat Programma/Menu/Bericht/Spel zichtbaar blijven als kleine koppen. */
.msf-timeline-panel .msf-kicker,
.msf-menu-panel .msf-kicker,
.msf-message-panel .msf-kicker,
.msf-bingo .msf-kicker {
  display: inline-block !important;
}

/* Menu gebruikt nu dezelfde kopstructuur als de andere pagina's. */
.msf-section-menu .msf-section-title {
  font-size: var(--msf-menu-title-size, 38px) !important;
  font-weight: var(--msf-menu-title-weight, 700) !important;
  font-style: var(--msf-menu-title-style, normal) !important;
  text-decoration: var(--msf-menu-title-decoration, none) !important;
  color: var(--msf-menu-title-color, var(--msf-gold, #b08a62)) !important;
}

/* Tijdlijn breder, zodat teksten zoals Toostmoment niet onnodig afbreken. */
.msf-timeline-list {
  max-width: min(760px, 100%) !important;
  width: min(760px, 100%) !important;
}

.msf-timeline-item {
  width: min(720px, 100%) !important;
  max-width: 720px !important;
  grid-template-columns: minmax(82px, 130px) 66px minmax(160px, 260px) !important;
  gap: 14px !important;
}

.msf-timeline-time,
.msf-timeline-icon,
.msf-timeline-text {
  text-align: center !important;
  justify-self: center !important;
}

@media (max-width: 520px) {
  .msf-timeline-list {
    max-width: 100% !important;
    width: 100% !important;
  }
  .msf-timeline-item {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(60px, .8fr) 46px minmax(135px, 1.6fr) !important;
    gap: 6px !important;
  }
  .msf-timeline-text {
    font-size: min(var(--msf-timeline-text-size, 22px), 18px) !important;
  }
}

/* Onderstrepen moet zich gedragen zoals in Word: ook hoofdletters volledig onderstreept. */
.msf-app * {
  text-decoration-skip-ink: none !important;
  text-underline-offset: .12em !important;
}

/* Onderbalk icoon/tekst netjes binnen één knop. */
.msf-tabs > button > .msf-tab-icon,
.msf-tabs > button > .msf-tab-label {
  pointer-events: none !important;
}


/* v31: kop-logo naast kleine kop, menu-kicker en flexibele tijdlijn */
.msf-hero-header,
.msf-section-header { position: relative !important; display: block !important; text-align: center !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
.msf-hero-kicker-row,
.msf-section-kicker-row { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin: 0 auto 4px !important; min-height: var(--msf-page-logo-size, 42px) !important; }
.msf-hero-logo,
.msf-section-logo { position: static !important; transform: none !important; width: var(--msf-page-logo-size, 42px) !important; max-width: var(--msf-page-logo-size, 42px) !important; max-height: var(--msf-page-logo-size, 42px) !important; height: auto !important; object-fit: contain !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; flex: 0 0 auto !important; }
.msf-section-logo-none .msf-hero-logo,
.msf-section-logo-none .msf-section-logo { display: none !important; }
.msf-section-title,
.msf-hero-textblock h1,
.msf-section-textblock { text-align: center !important; }
.msf-section-menu .msf-kicker { font-size: var(--msf-menu-kicker-size, 13px) !important; font-weight: var(--msf-menu-kicker-weight, 800) !important; font-style: var(--msf-menu-kicker-style, normal) !important; text-decoration: var(--msf-menu-kicker-decoration, none) !important; color: var(--msf-menu-kicker-color, var(--msf-gold, #c9876a)) !important; }
.msf-timeline-list { max-width: min(920px, 100%) !important; width: min(920px, 100%) !important; }
.msf-timeline-item { width: min(880px, 100%) !important; max-width: 880px !important; grid-template-columns: minmax(90px, 150px) 72px minmax(230px, 1fr) !important; }
.msf-timeline-text { white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; }
.msf-timeline-icon-text { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:54px !important; height:54px !important; font-size:32px !important; line-height:1 !important; color: currentColor !important; }
@media (max-width: 720px) { .msf-hero-kicker-row, .msf-section-kicker-row { min-height: var(--msf-page-logo-mobile-size, 30px) !important; gap: 8px !important; } .msf-hero-logo, .msf-section-logo { width: var(--msf-page-logo-mobile-size, 30px) !important; max-width: var(--msf-page-logo-mobile-size, 30px) !important; max-height: var(--msf-page-logo-mobile-size, 30px) !important; } .msf-timeline-item { grid-template-columns: minmax(70px, .9fr) 48px minmax(160px, 1.7fr) !important; gap: 8px !important; } .msf-timeline-icon-text { width:42px !important; height:42px !important; font-size:25px !important; } }
.msf-admin-timeline-row { grid-template-columns: 72px 220px 90px 115px 1fr !important; align-items:end !important; }
.msf-admin-timeline-row input,
.msf-admin-timeline-row select { width:100% !important; }
@media (max-width: 900px) { .msf-admin-timeline-row { grid-template-columns: 1fr !important; } }


/* v33: logo definitief naast de kleine koptekst (Bruiloft / Programma / Menu / Bericht / Spel), niet naast de titel eronder */
.msf-hero-header.msf-section-logo-kicker-left,
.msf-section-header.msf-section-logo-kicker-left {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}

.msf-hero-header.msf-section-logo-kicker-left .msf-hero-kicker-row,
.msf-section-header.msf-section-logo-kicker-left .msf-section-kicker-row {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 auto 6px !important;
  min-height: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

.msf-hero-header.msf-section-logo-kicker-left .msf-hero-logo,
.msf-section-header.msf-section-logo-kicker-left .msf-section-logo {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  display: inline-block !important;
  width: var(--msf-page-logo-size, 42px) !important;
  max-width: var(--msf-page-logo-size, 42px) !important;
  max-height: var(--msf-page-logo-size, 42px) !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.msf-hero-header.msf-section-logo-kicker-left .msf-kicker,
.msf-section-header.msf-section-logo-kicker-left .msf-kicker {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.msf-hero-header.msf-section-logo-kicker-left h1,
.msf-section-header.msf-section-logo-kicker-left .msf-section-title,
.msf-section-header.msf-section-logo-kicker-left h2 {
  display: block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  clear: both !important;
}

@media (max-width: 720px) {
  .msf-hero-header.msf-section-logo-kicker-left .msf-hero-logo,
  .msf-section-header.msf-section-logo-kicker-left .msf-section-logo {
    width: var(--msf-page-logo-mobile-size, 30px) !important;
    max-width: var(--msf-page-logo-mobile-size, 30px) !important;
    max-height: var(--msf-page-logo-mobile-size, 30px) !important;
  }
  .msf-hero-header.msf-section-logo-kicker-left .msf-hero-kicker-row,
  .msf-section-header.msf-section-logo-kicker-left .msf-section-kicker-row {
    gap: 8px !important;
  }
}

/* v34: logo helemaal links in de kopregel + klikbaar naar Fotobox-beheer */
.msf-hero-header.msf-section-logo-kicker-left,
.msf-section-header.msf-section-logo-kicker-left {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
}

.msf-hero-header.msf-section-logo-kicker-left .msf-hero-kicker-row,
.msf-section-header.msf-section-logo-kicker-left .msf-section-kicker-row {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: max(var(--msf-page-logo-size, 42px), 34px) !important;
  margin: 0 auto 6px !important;
  padding: 0 calc(var(--msf-page-logo-size, 42px) + 14px) !important;
  box-sizing: border-box !important;
}

.msf-logo-admin-link {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--msf-page-logo-size, 42px) !important;
  max-width: var(--msf-page-logo-size, 42px) !important;
  height: var(--msf-page-logo-size, 42px) !important;
  max-height: var(--msf-page-logo-size, 42px) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  outline-offset: 4px !important;
}

.msf-logo-admin-link .msf-hero-logo,
.msf-logo-admin-link .msf-section-logo {
  position: static !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.msf-hero-header.msf-section-logo-kicker-left .msf-kicker,
.msf-section-header.msf-section-logo-kicker-left .msf-kicker {
  margin: 0 auto !important;
  text-align: center !important;
}

.msf-logo-admin-link-beamer {
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  .msf-hero-header.msf-section-logo-kicker-left .msf-hero-kicker-row,
  .msf-section-header.msf-section-logo-kicker-left .msf-section-kicker-row {
    min-height: max(var(--msf-page-logo-mobile-size, 30px), 28px) !important;
    padding-left: calc(var(--msf-page-logo-mobile-size, 30px) + 10px) !important;
    padding-right: calc(var(--msf-page-logo-mobile-size, 30px) + 10px) !important;
  }
  .msf-logo-admin-link {
    width: var(--msf-page-logo-mobile-size, 30px) !important;
    max-width: var(--msf-page-logo-mobile-size, 30px) !important;
    height: var(--msf-page-logo-mobile-size, 30px) !important;
    max-height: var(--msf-page-logo-mobile-size, 30px) !important;
  }
}

/* v38: verstelbare bingo-meldingen en popup */
.msf-bingo-player {
  font-size: var(--msf-bingo-player-size, 13px) !important;
  font-weight: var(--msf-bingo-player-weight, 700) !important;
  font-style: var(--msf-bingo-player-style, normal) !important;
  text-decoration: var(--msf-bingo-player-decoration, none) !important;
  color: var(--msf-bingo-player-color, rgba(255,255,255,.86)) !important;
}
.msf-bingo-message {
  font-size: var(--msf-bingo-message-size, 15px) !important;
  font-weight: var(--msf-bingo-message-weight, 700) !important;
  font-style: var(--msf-bingo-message-style, normal) !important;
  text-decoration: var(--msf-bingo-message-decoration, none) !important;
  color: var(--msf-bingo-message-color, rgba(255,255,255,.86)) !important;
}
.msf-bingo-result-modal-card,
.msf-bingo-result-body p,
.msf-bingo-result-top {
  font-size: var(--msf-bingo-popup-size, 17px) !important;
  font-weight: var(--msf-bingo-popup-weight, 400) !important;
  font-style: var(--msf-bingo-popup-style, normal) !important;
  text-decoration: var(--msf-bingo-popup-decoration, none) !important;
  color: var(--msf-bingo-popup-color, #161616) !important;
}

/* v40: welkom- en bedankpopup */
.msf-info-popup {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.72);
  color: var(--msf-popup-color, #fff);
}
.msf-info-popup-card {
  width: min(560px, 94vw);
  max-height: min(820px, 90vh);
  overflow: auto;
  position: relative;
  border-radius: 28px;
  background: var(--msf-popup-bg, #161616);
  color: var(--msf-popup-color, #fff);
  text-align: center;
  padding: 34px 28px 28px;
  box-shadow: 0 28px 80px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
}
.msf-info-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--msf-popup-color, #fff);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.msf-info-popup h2 {
  margin: 6px 0 18px;
  font-size: clamp(28px, 5.5vw, 42px);
  line-height: 1.08;
  color: var(--msf-popup-color, #fff);
}
.msf-info-popup-lines {
  display: grid;
  gap: 10px;
  margin: 0 auto 22px;
  max-width: 480px;
}
.msf-info-popup-lines p {
  margin: 0;
  color: var(--msf-popup-color, #fff);
  font-size: clamp(16px, 3.7vw, 19px);
  line-height: 1.45;
}
.msf-info-popup-logo {
  display: flex;
  justify-content: center;
  margin: 18px 0 18px;
}
.msf-info-popup-logo img {
  width: var(--msf-popup-logo-size, 90px);
  max-width: 70%;
  height: auto;
  display: block;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.msf-info-popup-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 48px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  color: #111;
  font-size: 16px;
  font-weight: 800;
  padding: 12px 22px;
  cursor: pointer;
}

/* v41: admin menu repeater */
.msf-admin-menu-row {
  grid-template-columns: 90px minmax(140px, 1fr) minmax(260px, 2.2fr) auto !important;
  align-items: end;
}
.msf-admin-menu-row label { display: flex; flex-direction: column; gap: 6px; }
.msf-admin-menu-row label span { font-weight: 600; color: #1d2327; }
.msf-admin-menu-row textarea { width: 100%; min-height: 92px; }
@media (max-width: 900px) {
  .msf-admin-menu-row { grid-template-columns: 1fr !important; }
}


/* v42: nettere menu-editor zoals tijdlijn + robuust verwijderen */
.msf-admin-menu-header {
  display: grid;
  grid-template-columns: 80px minmax(160px, 220px) minmax(320px, 1fr) 92px;
  gap: 10px;
  align-items: center;
  color: #646970;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
  margin: 12px 0 6px;
}
.msf-admin-menu-list { gap: 10px !important; }
.msf-admin-menu-row {
  grid-template-columns: 80px minmax(160px, 220px) minmax(320px, 1fr) 92px !important;
  align-items: end !important;
  gap: 10px !important;
  background: #fff !important;
  border: 1px solid #dcdcde !important;
  border-radius: 12px !important;
  padding: 12px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.035) !important;
}
.msf-admin-menu-row label { display: flex !important; flex-direction: column !important; gap: 6px !important; margin: 0 !important; }
.msf-admin-menu-row label span { font-weight: 700 !important; color: #1d2327 !important; font-size: 12px !important; }
.msf-admin-menu-row input,
.msf-admin-menu-row textarea { width: 100% !important; }
.msf-admin-menu-row textarea { min-height: 68px !important; resize: vertical !important; line-height: 1.35 !important; }
.msf-admin-menu-row .msf-admin-row-delete { align-self: end !important; min-height: 36px !important; text-align: center !important; }
@media (max-width: 900px) {
  .msf-admin-menu-header { display: none !important; }
  .msf-admin-menu-row { grid-template-columns: 1fr !important; }
  .msf-admin-menu-row .msf-admin-row-delete { width: 100% !important; }
}

/* v43: bedankmelding harder zichtbaar maken */
.msf-info-popup-thankyou {
  background: rgba(0,0,0,.86) !important;
}
.msf-info-popup-thankyou .msf-info-popup-card {
  transform: scale(1.02);
  box-shadow: 0 34px 100px rgba(0,0,0,.62), 0 0 0 2px rgba(255,255,255,.12) inset;
}


/* v46: zichtbare refreshknop op tab Foto’s + robuuste onderbalklayout */
.msf-panel[data-msf-panel="gallery"] .msf-gallery-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 18px 0 14px !important;
  background: #101115 !important;
  color: #ffffff !important;
}
.msf-panel[data-msf-panel="gallery"] .msf-gallery-header h2,
.msf-panel[data-msf-panel="gallery"] .msf-gallery-actions {
  display: flex !important;
}
.msf-panel[data-msf-panel="gallery"] .msf-gallery-header h2 {
  margin: 0 !important;
  align-items: center !important;
  color: #ffffff !important;
}
.msf-panel[data-msf-panel="gallery"] .msf-gallery-actions {
  align-items: center !important;
  justify-content: flex-end !important;
}
.msf-refresh {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 0 !important;
  padding: 11px 18px !important;
  min-height: 42px !important;
  background: var(--msf-refresh-button-bg, #ffffff) !important;
  color: var(--msf-refresh-button-color, #111216) !important;
  font-size: var(--msf-refresh-button-size, 15px) !important;
  font-weight: var(--msf-refresh-button-weight, 800) !important;
  font-style: var(--msf-refresh-button-style, normal) !important;
  text-decoration: var(--msf-refresh-button-decoration, none) !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.22) !important;
  line-height: 1.15 !important;
}
.msf-refresh:active {
  transform: translateY(1px) !important;
}
@media (max-width: 520px) {
  .msf-panel[data-msf-panel="gallery"] .msf-gallery-header {
    align-items: stretch !important;
  }
  .msf-refresh {
    padding: 10px 14px !important;
    min-height: 40px !important;
  }
}


/* v47: leesbare reactie-/bingo-uitslagpagina en instelbare berichtknop */
.msf-message-form button {
  background: var(--msf-message-button-bg, #ffffff) !important;
  color: var(--msf-message-button-color, #111216) !important;
}
.msf-reactions-panel {
  background: var(--msf-reactions-panel-bg, #f8f2ed) !important;
  color: #151515 !important;
}
.msf-reactions-page .msf-kicker {
  font-size: var(--msf-reactions-kicker-size, 13px) !important;
  font-weight: var(--msf-reactions-kicker-weight, 800) !important;
  font-style: var(--msf-reactions-kicker-style, normal) !important;
  text-decoration: var(--msf-reactions-kicker-decoration, none) !important;
  color: var(--msf-reactions-kicker-color, #c9876a) !important;
}
.msf-reactions-page .msf-info-header h2 {
  font-size: var(--msf-reactions-title-size, 34px) !important;
  font-weight: var(--msf-reactions-title-weight, 800) !important;
  font-style: var(--msf-reactions-title-style, normal) !important;
  text-decoration: var(--msf-reactions-title-decoration, none) !important;
  color: var(--msf-reactions-title-color, #111216) !important;
}
.msf-reactions-page .msf-info-header p {
  font-size: var(--msf-reactions-intro-size, 16px) !important;
  font-weight: var(--msf-reactions-intro-weight, 400) !important;
  font-style: var(--msf-reactions-intro-style, normal) !important;
  text-decoration: var(--msf-reactions-intro-decoration, none) !important;
  color: var(--msf-reactions-intro-color, #4f4036) !important;
}
.msf-reaction-card {
  background: var(--msf-reactions-card-bg, #ffffff) !important;
  color: #151515 !important;
}
.msf-reaction-meta strong {
  font-size: var(--msf-reactions-name-size, 15px) !important;
  font-weight: var(--msf-reactions-name-weight, 800) !important;
  font-style: var(--msf-reactions-name-style, normal) !important;
  text-decoration: var(--msf-reactions-name-decoration, none) !important;
  color: var(--msf-reactions-name-color, #59402d) !important;
}
.msf-reaction-meta span {
  font-size: var(--msf-reactions-time-size, 13px) !important;
  font-weight: var(--msf-reactions-time-weight, 400) !important;
  font-style: var(--msf-reactions-time-style, normal) !important;
  text-decoration: var(--msf-reactions-time-decoration, none) !important;
  color: var(--msf-reactions-time-color, #6a625c) !important;
}
.msf-reaction-card p {
  font-size: var(--msf-reactions-message-size, 17px) !important;
  font-weight: var(--msf-reactions-message-weight, 400) !important;
  font-style: var(--msf-reactions-message-style, normal) !important;
  text-decoration: var(--msf-reactions-message-decoration, none) !important;
  color: var(--msf-reactions-message-color, #151515) !important;
}
.msf-bingo-results-panel {
  background: var(--msf-bingo-results-panel-bg, #f8f2ed) !important;
  color: #151515 !important;
}
.msf-bingo-results-page .msf-kicker {
  font-size: var(--msf-bingo-results-kicker-size, 13px) !important;
  font-weight: var(--msf-bingo-results-kicker-weight, 800) !important;
  font-style: var(--msf-bingo-results-kicker-style, normal) !important;
  text-decoration: var(--msf-bingo-results-kicker-decoration, none) !important;
  color: var(--msf-bingo-results-kicker-color, #c9876a) !important;
}
.msf-bingo-results-page .msf-info-header h2 {
  font-size: var(--msf-bingo-results-title-size, 34px) !important;
  font-weight: var(--msf-bingo-results-title-weight, 800) !important;
  font-style: var(--msf-bingo-results-title-style, normal) !important;
  text-decoration: var(--msf-bingo-results-title-decoration, none) !important;
  color: var(--msf-bingo-results-title-color, #111216) !important;
}
.msf-bingo-results-page .msf-info-header p {
  font-size: var(--msf-bingo-results-intro-size, 16px) !important;
  font-weight: var(--msf-bingo-results-intro-weight, 400) !important;
  font-style: var(--msf-bingo-results-intro-style, normal) !important;
  text-decoration: var(--msf-bingo-results-intro-decoration, none) !important;
  color: var(--msf-bingo-results-intro-color, #4f4036) !important;
}
.msf-bingo-result-card {
  background: var(--msf-bingo-results-card-bg, #ffffff) !important;
  color: #151515 !important;
}
.msf-bingo-result-rank {
  background: var(--msf-bingo-results-rank-bg, #111216) !important;
  color: var(--msf-bingo-results-rank-color, #ffffff) !important;
  font-size: var(--msf-bingo-results-rank-size, 18px) !important;
  font-weight: var(--msf-bingo-results-rank-weight, 800) !important;
  font-style: var(--msf-bingo-results-rank-style, normal) !important;
  text-decoration: var(--msf-bingo-results-rank-decoration, none) !important;
}
.msf-bingo-result-content strong {
  color: var(--msf-bingo-results-name-color, #111216) !important;
  font-size: var(--msf-bingo-results-name-size, 18px) !important;
  font-weight: var(--msf-bingo-results-name-weight, 800) !important;
  font-style: var(--msf-bingo-results-name-style, normal) !important;
  text-decoration: var(--msf-bingo-results-name-decoration, none) !important;
}
.msf-bingo-result-content span {
  color: var(--msf-bingo-results-duration-color, #59402d) !important;
  font-size: var(--msf-bingo-results-duration-size, 15px) !important;
  font-weight: var(--msf-bingo-results-duration-weight, 800) !important;
  font-style: var(--msf-bingo-results-duration-style, normal) !important;
  text-decoration: var(--msf-bingo-results-duration-decoration, none) !important;
}
.msf-bingo-result-content small {
  color: var(--msf-bingo-results-time-color, #6a625c) !important;
  font-size: var(--msf-bingo-results-time-size, 12px) !important;
  font-weight: var(--msf-bingo-results-time-weight, 400) !important;
  font-style: var(--msf-bingo-results-time-style, normal) !important;
  text-decoration: var(--msf-bingo-results-time-decoration, none) !important;
}
.msf-bingo-results-page .msf-empty,
.msf-reactions-page .msf-empty {
  color: #151515 !important;
}