/* Live demo van de configurator op de IT Mammoet-site. Alles begint met .itm-demo, zodat het niets van de site raakt. */
.itm-demo {
  --itm-ink: #0B0B0C;
  --itm-navy: #25346A;
  --itm-soft: #E9ECF6;
  --itm-line: #E3E3E6;
  --itm-muted: #686B73;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--itm-ink);
}
.itm-demo *, .itm-demo *::before, .itm-demo *::after { box-sizing: border-box; }
.itm-demo button { font: inherit; cursor: pointer; }

/* tabbladen */
.itm-demo__tabs { display: flex; justify-content: center; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.itm-demo__tab {
  padding: 10px 18px; border: 1px solid var(--itm-line); border-radius: 999px; background: #fff; color: var(--itm-ink);
  font-weight: 600; font-size: 15px; line-height: 1.2;
}
.itm-demo__tab:hover { border-color: var(--itm-navy); }
.itm-demo__tab[aria-selected="true"] { background: var(--itm-navy); border-color: var(--itm-navy); color: #fff; }
.itm-demo__tab:focus-visible, .itm-demo__btn:focus-visible, .itm-demo__bar button:focus-visible { outline: 3px solid #AEB9E3; outline-offset: 2px; }

/* het kader: een browservenster */
.itm-demo__stage { border: 1px solid var(--itm-line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px -28px rgba(11, 11, 12, .35); }
.itm-demo__bar { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; background: #F4F4F5; border-bottom: 1px solid var(--itm-line); }
.itm-demo__dots { display: flex; gap: 6px; flex: none; }
.itm-demo__dots i { width: 10px; height: 10px; border-radius: 50%; background: #CFCFD4; }
.itm-demo__addr { flex: 1; min-width: 0; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--itm-line); color: var(--itm-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.itm-demo__title { display: none; flex: 1; min-width: 0; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itm-demo__title span { opacity: .65; font-weight: 400; }
.itm-demo__bar button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--itm-line); background: #fff; color: var(--itm-ink); font-weight: 600; font-size: 14px; white-space: nowrap; }
.itm-demo__bar button:hover { border-color: var(--itm-navy); }
.itm-demo__bar svg { width: 16px; height: 16px; flex: none; }
.itm-demo__close { display: none !important; }

.itm-demo__screen { position: relative; aspect-ratio: 16 / 9; min-height: 560px; max-height: 760px; width: 100%; background: #E7E7EA; }
.itm-demo__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.itm-demo__poster { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; width: 100%; height: 100%; background: #E7E7EA; display: grid; place-items: center; overflow: hidden; }
.itm-demo__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.itm-demo__poster::after { content: ''; position: absolute; inset: 0; background: rgba(11, 11, 12, .38); transition: background .2s; }
.itm-demo__poster:hover::after { background: rgba(11, 11, 12, .28); }
.itm-demo__btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 10px; border: 0; background: var(--itm-navy); color: #fff; font-weight: 700; font-size: 18px; text-decoration: none; box-shadow: 0 10px 30px -10px rgba(11, 11, 12, .6); }
.itm-demo__poster:hover .itm-demo__btn, a.itm-demo__btn:hover { background: #1B2752; }
.itm-demo__btn svg { width: 20px; height: 20px; }
.itm-demo.is-live .itm-demo__poster { display: none; }
.itm-demo.is-live.is-loading .itm-demo__poster { display: grid; z-index: 1; cursor: progress; }
.itm-demo.is-loading .itm-demo__btn svg { display: none; }

.itm-demo__under { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 22px 0 0; text-align: center; }
.itm-demo__note { margin: 0; color: var(--itm-muted); font-size: 14px; }

/* volledig scherm: het kader vult het hele venster, met een vaste balk bovenin */
.itm-demo__stage.is-full { position: fixed; inset: 0; z-index: 2147483000; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.itm-demo__stage.is-full .itm-demo__bar { background: var(--itm-ink); color: #fff; border-bottom: 0; min-height: 52px; padding: 8px 12px 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); }
.itm-demo__stage.is-full .itm-demo__dots, .itm-demo__stage.is-full .itm-demo__addr, .itm-demo__stage.is-full .itm-demo__grow { display: none; }
.itm-demo__stage.is-full .itm-demo__title { display: block; }
.itm-demo__stage.is-full .itm-demo__close { display: inline-flex !important; background: #fff; border-color: #fff; }
.itm-demo__stage.is-full .itm-demo__screen { flex: 1; aspect-ratio: auto; min-height: 0; max-height: none; }
html.itm-demo-open, html.itm-demo-open body { overflow: hidden !important; }

/* mobiel: in het kader past de configurator niet, dus daar staat alleen het beeld met de knop; een tik opent volledig scherm */
@media (max-width: 760px) {
  .itm-demo__tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .itm-demo__tabs::-webkit-scrollbar { display: none; }
  .itm-demo__tab { flex: none; }
  .itm-demo__stage:not(.is-full) .itm-demo__bar { display: none; }
  .itm-demo__stage:not(.is-full) .itm-demo__screen { min-height: 0; aspect-ratio: 4 / 3; }
  .itm-demo__stage:not(.is-full) iframe { visibility: hidden; }
  .itm-demo.is-live .itm-demo__stage:not(.is-full) .itm-demo__poster { display: grid; }
  .itm-demo__btn { font-size: 16px; padding: 14px 20px; }
  .itm-demo__close span { display: none; }
  .itm-demo__stage.is-full .itm-demo__close { padding: 9px 11px; }
}
@media (prefers-reduced-motion: reduce) { .itm-demo__poster::after { transition: none; } }