/* ================================================================
   mainstage — gedeelde statische CSS (identiek voor elk museum)
   Per-museum kleuren komen via --brand-bg/--brand-ink (zie ms_theme_vars()
   in inc/museum.inc.php + het kleine inline :root-blokje per pagina).
   Niet cachebaar hardcoderen wat per museum verschilt — alleen de 2
   merk-kleuren horen buiten dit bestand te blijven.
   ================================================================ */

/* === topbar (inc/topbar.inc.php) === */
.ig-topbar {
    background: var(--brand-bg);
    color: var(--brand-ink);
    padding: .5rem .875rem;
    /* Veilige zone bovenaan: in de PWA (black-translucent statusbalk) loopt
       content onder de klok/notch door; duw de balk daaronder. */
    padding-top: calc(.5rem + env(safe-area-inset-top));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .375rem;
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 56px;
}

.ig-topbar-left {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: 1 0 auto;   /* nooit krimpen: het logo is de menuknop en moet altijd bereikbaar zijn */
}

/* Past de rij niet (veel knoppen + doelgroep-schakelaar op een smalle telefoon), dan krimpt
   en scrolt hij opzij i.p.v. over het logo/de menuknop heen te schuiven. */
.ig-topbar-right {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.ig-topbar-right::-webkit-scrollbar { display: none; }
.ig-topbar-right > * { flex-shrink: 0; }

/* Smalle telefoons: offline-knop alleen in het menu (staat daar ook) en compactere knoppen,
   zodat alles naast het logo past. */
@media (max-width: 430px) {
    #ig-tb-offline-btn { display: none; }
    .ig-topbar-right .ig-tb-btn { width: 36px; }
    .ig-topbar-right .ig-tb-btn-lang { width: auto; padding: 0 .4rem; }
    .ig-tb-audience { margin: 0 .125rem; }
    .ig-tb-aud-seg { width: 30px; }
}

/* ── Gedeelde knop-stijl ── */
.ig-tb-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    border-radius: 6px;
    padding: 0;
    opacity: .8;
    transition: opacity .15s, background .15s;
}
.ig-tb-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,.15);
}

.ig-tb-btn-lang {
    width: auto;
    padding: 0 .625rem;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Doelgroep-schakelaar (volwassenen | kinderen), zelfde iconen als op language.php.
   Actieve kant gevuld; andere kant is een link of — zonder content — grijs. */
.ig-tb-audience {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    margin: 0 .25rem;
    border-radius: 100px;
    border: 1px solid var(--brand-ink-a33, rgba(255,255,255,.35));
    flex-shrink: 0;
}
.ig-tb-aud-seg {
    width: 34px;
    height: 32px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 6px;
    border-radius: 100px;
    color: inherit;
    text-decoration: none;
    opacity: .8;
    transition: opacity .15s, background .15s;
}
a.ig-tb-aud-seg:hover { opacity: 1; background: rgba(255,255,255,.15); }
.ig-tb-aud-seg.is-active {
    background: var(--brand-ink);
    color: var(--brand-bg);
    opacity: 1;
}
.ig-tb-aud-seg.is-unavailable { opacity: .3; }
.ig-tb-aud-seg .ig-icon { width: auto; }
.ig-tb-aud-adults   .ig-icon { height: 20px; aspect-ratio: 320 / 512; }
.ig-tb-aud-children .ig-icon { height: 15px; aspect-ratio: 384 / 512; }

/* Alleen voor schermlezers zichtbaar. */
.ig-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Logo / initialen ── */
.ig-topbar-logo-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    display: flex;
    align-items: center;
    border-radius: 3px;
    padding: 0;
    transition: opacity .15s;
    flex-shrink: 0;
}
.ig-topbar-logo-btn:hover { opacity: .85; }

.ig-topbar-logo-img {
    height: 40px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    display: block;
    border-radius: 3px;
}

.ig-topbar-initials {
    width: 40px;
    height: 40px;
    border: 2px solid var(--brand-ink);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--brand-ink);
    flex-shrink: 0;
    line-height: 1;
}

/* Testaccount van het museum: altijd zichtbaar, met de eindtijd van het testvenster */
.ig-tb-test {
    margin-left: .375rem;
    padding: .25rem .5rem;
    border-radius: 3px;
    background: var(--warning-bg, #FEF3CD);
    color: var(--warning-text, #7A5200);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Slide-down menu ── */
.ig-menu {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--ig-topbar-h, 56px);
    z-index: 99;
    background: var(--brand-bg);
    color: var(--brand-ink);
    transform: translateY(-110%);
    /* Dicht = ook onzichtbaar: anders kwam het (onderste item "Uitloggen") tevoorschijn
       zodra de topbar wegschoof (iOS omlaagtrekken, fullscreen). visibility pas ná de
       sluit-animatie uit, bij openen meteen aan. */
    visibility: hidden;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .28s;
    box-shadow: 0 6px 24px rgba(0,0,0,.28);
}
.ig-menu.open {
    transform: translateY(0);
    visibility: visible;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}

.ig-menu-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    width: 100%;
    padding: .875rem 1.25rem;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    opacity: .9;
    transition: background .15s, opacity .15s;
    border-top: 1px solid rgba(255,255,255,.12);
}
.ig-menu-item:first-child { border-top: none; }
.ig-menu-item:hover {
    background: rgba(255,255,255,.1);
    opacity: 1;
}
.ig-menu-item.disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

/* Wie er ingelogd is — bovenaan het menu, geen knop */
.ig-menu-user {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1rem 1.25rem .875rem;
}
.ig-menu-user svg { flex-shrink: 0; opacity: .75; }
.ig-menu-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}
.ig-menu-user-name {
    font-size: 1rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ig-menu-user-email {
    font-size: .8rem;
    opacity: .7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ig-menu-user-text > :only-child { font-size: .9rem; opacity: .9; }

.ig-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 98;
    display: none;
}
.ig-menu-backdrop.open { display: block; }

/* ── Info modal + Logout modal (gedeelde sheet-stijl) ── */
.ig-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 200;
    align-items: flex-end;
}
.ig-modal-overlay.open { display: flex; }

.ig-modal-sheet {
    background: #FAF8F5;
    border-radius: 20px 20px 0 0;
    padding: 1.5rem 1.25rem 2.5rem;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    animation: igSlideUp .22s ease-out;
}

/* Info modal: scrollable content, sticky close button */
#ig-info-modal .ig-modal-sheet {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    padding-bottom: 0;
}
.ig-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    padding-bottom: 2.5rem;
}

@keyframes igSlideUp {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.ig-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.ig-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1C2B2D;
}

.ig-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #E8E1D6;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1C2B2D;
    flex-shrink: 0;
    transition: background .15s;
}
.ig-modal-close:hover { background: #D8CFC4; }

/* Info modal stap-lijst */
.ig-modal-steps { display: flex; flex-direction: column; gap: 1rem; }
.ig-modal-step  { display: flex; gap: .875rem; align-items: flex-start; }

.ig-modal-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-bg);
    color: var(--brand-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: .1rem;
}

.ig-modal-step-text  { font-size: .9rem; color: #1C2B2D; line-height: 1.55; }
.ig-modal-step-label { font-weight: 700; display: block; margin-bottom: .1rem; }

/* Info modal — help intro tekst */
.ig-modal-intro {
    font-size: .875rem;
    color: #4A5B5D;
    line-height: 1.6;
    padding: .75rem 1rem;
    background: #F0EDE8;
    border-radius: 10px;
    border-left: 3px solid var(--brand-bg);
    margin-bottom: 1.25rem;
}

/* Info modal — sectie-kop */
.ig-modal-section-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #4A5B5D;
    margin-bottom: .75rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid #E8E1D6;
}

/* Info modal — sectie-scheiding */
.ig-modal-divider {
    height: 1px;
    background: #E8E1D6;
    margin: 1.25rem 0;
}

/* Info modal — games badge-reset knop */
.ig-modal-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .625rem;
    padding: .55rem 1rem;
    background: var(--brand-bg);
    color: var(--brand-ink);
    border: none;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
}
.ig-modal-reset-btn:hover { opacity: .85; }

/* Info modal — bevestigingsbericht na reset */
.ig-modal-reset-confirm {
    display: none;
    margin-top: .625rem;
    font-size: .85rem;
    color: #1C2B2D;
    font-weight: 600;
    padding: .55rem .875rem;
    background: #DFF0E8;
    border-radius: 8px;
    border-left: 3px solid #2E7D52;
}
.ig-modal-reset-confirm.visible { display: block; }

/* Over modal — inhoudsblokken */
.ig-over-block {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: 0;
}
.ig-over-block-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #4A5B5D;
}
.ig-over-block-value {
    font-size: .9rem;
    color: #1C2B2D;
    line-height: 1.55;
    white-space: pre-line;
}
.ig-over-block-value a {
    color: var(--brand-bg);
    text-decoration: none;
    font-weight: 600;
}
.ig-over-block-value a:hover { text-decoration: underline; }
.ig-over-hours { display: flex; flex-direction: column; white-space: normal; }
.ig-over-hours-row { display: flex; justify-content: space-between; gap: 1rem; }
.ig-over-hours-row > span:last-child { font-variant-numeric: tabular-nums; }

/* Social link-knoppen */
.ig-over-socials {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .2rem;
}
.ig-over-social-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .75rem;
    background: #F0EDE8;
    border-radius: 100px;
    font-size: .8rem;
    font-weight: 600;
    color: #1C2B2D;
    text-decoration: none;
    transition: background .15s;
}
.ig-over-social-btn:hover { background: #E8E1D6; }

/* Hoog contrast — over modal */
html.ig-hc .ig-over-block-label { color: #aaa !important; }
html.ig-hc .ig-over-block-value { color: #fff !important; }
html.ig-hc .ig-over-block-value a { color: #7df !important; }
html.ig-hc .ig-over-social-btn { background: #222 !important; color: #fff !important; }

/* Hoog contrast aanpassingen */
html.ig-hc .ig-modal-intro { background: #222 !important; color: #fff !important; border-left-color: #fff !important; }
html.ig-hc .ig-modal-section-title { color: #aaa !important; border-bottom-color: #444 !important; }
html.ig-hc .ig-modal-divider { background: #444 !important; }
html.ig-hc .ig-modal-reset-btn { background: #fff !important; color: #000 !important; }
html.ig-hc .ig-modal-reset-confirm { background: #1a3a28 !important; color: #fff !important; }

/* Logout modal inhoud */
.ig-logout-body {
    color: #1C2B2D;
    margin-bottom: 1.5rem;
}
.ig-logout-question {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .625rem;
}
.ig-logout-time {
    font-size: .875rem;
    color: #4A5B5D;
    line-height: 1.55;
    padding: .75rem 1rem;
    background: #F0EDE8;
    border-radius: 10px;
    border-left: 3px solid var(--brand-bg);
}
.ig-logout-actions {
    display: flex;
    gap: .625rem;
}
.ig-logout-confirm {
    flex: 1;
    padding: .8rem 1rem;
    border: none;
    border-radius: 10px;
    background: #C0392B;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: opacity .15s;
}
.ig-logout-confirm:hover { opacity: .88; }
.ig-logout-cancel {
    flex: 1;
    padding: .8rem 1rem;
    border: 1px solid #D8CFC4;
    border-radius: 10px;
    background: #FAF8F5;
    color: #1C2B2D;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.ig-logout-cancel:hover { background: #F0EDE8; }

/* ── A11y knop actief-staat (normaal contrast) ── */
.ig-a11y-active {
    background: rgba(255,255,255,.25) !important;
}

/* ── Newsletter badge in menu ── */
.ig-nl-badge {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .4rem .875rem;
    border-radius: 100px;
    border: 1.5px solid #2E7D52;
    background: transparent;
    min-height: 36px;
    transition: background .2s, border-color .2s;
}
.ig-nl-badge--in {
    background: #2E7D52;
    border-color: #2E7D52;
}
.ig-nl-badge-text {
    font-size: .82rem;
    color: inherit;
    line-height: 1.35;
    text-align: center;
}
.ig-nl-badge--in .ig-nl-badge-text { display: none; }
.ig-nl-badge-check { display: none; color: #fff; }
.ig-nl-badge--in .ig-nl-badge-check { display: block; }

html.ig-hc .ig-nl-badge { border-color: #fff !important; }
html.ig-hc .ig-nl-badge--in { background: #fff !important; }
html.ig-hc .ig-nl-badge--in .ig-nl-badge-check { color: #000 !important; }

/* ── Hoog contrast modus — topbar-elementen ── */
html.ig-hc .ig-topbar {
    background: #000 !important;
    color: #fff !important;
    border-bottom: 2px solid #fff;
}
html.ig-hc .ig-menu {
    background: #000 !important;
    color: #fff !important;
    border-bottom: 2px solid #333;
}
html.ig-hc .ig-menu-item { border-color: #333 !important; color: #fff !important; }
html.ig-hc .ig-menu-user { color: #fff !important; }
html.ig-hc .ig-menu-item:hover { background: #222 !important; }
html.ig-hc .ig-modal-sheet { background: #111 !important; }
html.ig-hc .ig-modal-title { color: #fff !important; }
html.ig-hc .ig-modal-close { background: #333 !important; color: #fff !important; }
html.ig-hc .ig-modal-step-text { color: #fff !important; }
html.ig-hc .ig-modal-step-num { background: #fff !important; color: #000 !important; }
html.ig-hc .ig-logout-body,
html.ig-hc .ig-logout-question { color: #fff !important; }
html.ig-hc .ig-logout-time {
    background: #222 !important;
    color: #fff !important;
    border-left-color: #fff !important;
}
html.ig-hc .ig-logout-cancel {
    background: #222 !important;
    color: #fff !important;
    border-color: #fff !important;
}
html.ig-hc .ig-a11y-active {
    background: #fff !important;
    color: #000 !important;
}
html.ig-hc .ig-tb-audience { border-color: #fff !important; }
html.ig-hc .ig-tb-aud-seg.is-active {
    background: #fff !important;
    color: #000 !important;
}
html.ig-hc *:focus-visible {
    outline: 3px solid #FFFF00 !important;
    outline-offset: 2px !important;
}
/* ── Update-banner (nieuwe content beschikbaar) ── */
.ig-update-banner {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .6rem .875rem;
    background: var(--brand-ink);
    color: var(--brand-bg);
    font-size: .85rem;
    font-weight: 600;
    position: sticky;
    top: var(--ig-topbar-h, 56px);
    z-index: 95;
}
.ig-update-banner[hidden] { display: none; }
.ig-update-banner__text { flex: 1; }
.ig-update-banner__btn {
    border: none;
    background: var(--brand-bg);
    color: var(--brand-ink);
    font-weight: 700;
    font-size: .8rem;
    padding: .4rem .85rem;
    border-radius: 100px;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}
.ig-update-banner__close {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .25rem;
    flex-shrink: 0;
    opacity: .7;
}
html.ig-hc .ig-update-banner { background: #fff !important; color: #000 !important; border-bottom: 2px solid #000; }
html.ig-hc .ig-update-banner__btn { background: #000 !important; color: #fff !important; }

/* Survey badge: no left-hand label, button centered, close pinned to the corner.
   Unlike the "update available" banner this one isn't meant to stay pinned while
   scrolling — a sticky pill kept re-covering the tour photo underneath it as the
   page scrolled. #id selector so this reliably wins over .ig-update-banner's
   position:sticky regardless of source order. */
#ig-survey-banner.ig-survey-banner {
    /* relative (not sticky/static) — keeps this a positioning context for the
       absolutely-placed close button below, without sticky's overlap-while-
       scrolling behavior. Must explicitly reset top: the shared .ig-update-banner
       rule sets top: var(--ig-topbar-h, 56px) for its sticky behavior — under
       position:relative that offset still applies and shoved this banner down
       over the first tour card's photo instead of leaving it inert. */
    position: relative;
    top: auto;
    justify-content: center;
}
#ig-survey-banner.ig-survey-banner .ig-update-banner__close {
    position: absolute;
    right: .875rem;
    top: 50%;
    transform: translateY(-50%);
}

/* ── Lucide icon baseline ── */
.ig-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.ig-modal-step-num .ig-icon { width: 15px; height: 15px; }
.ig-tb-btn .ig-icon { width: 20px; height: 20px; }
.ig-icon-lang { width: 16px; height: 16px; }
/* Offline-knop: download-icoon blijft altijd staan; "al gedownload" = vinkje-badge
   rechtsonder. Kleuren omgekeerd t.o.v. de topbar (brand-ink vlak, brand-bg
   vinkje + rand) zodat het bij elke museumkleur contrasteert. */
#ig-tb-offline-btn { position: relative; }
.ig-tb-offline-badge {
    display: none;
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--brand-ink);
    color: var(--brand-bg);
    box-shadow: 0 0 0 2px var(--brand-bg);
    align-items: center;
    justify-content: center;
}
.ig-tb-offline-done .ig-tb-offline-badge { display: flex; }
html.ig-hc .ig-tb-offline-badge { background: #fff !important; color: #000 !important; box-shadow: 0 0 0 2px #000 !important; }

/* === login (login.php) === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Basis, gedeeld door alle 5 pagina's (login/language/install/tours/poi) — was
   voorheen 5x los gedupliceerd binnen dit bestand, met o.a. de achtergrondkleur
   verschillend per pagina-type. Omdat het allemaal in één stylesheet staat wint
   bij een botsende `html, body`-regel de laatst-gedefinieerde voor ALLE pagina's
   (niet alleen de pagina waar 'ie bij hoort) — vandaar nu expliciete scoping per
   pagina-type i.p.v. herhaalde bare-element-selectors. */
html, body {
    min-height: 100dvh;
    font-family: system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* iOS-PWA (black-translucent + viewport-fit=cover): is het document korter dan het scherm,
   dan legt iOS bij openen de viewport-onderkant een statusbalk (±59px) te hoog — gemeten:
   innerHeight 873 i.p.v. 932 tot de eerste swipe; fixed onderbalk zweefde, strook eronder
   is geen webinhoud. Document minstens schermhoog maken (100vh = 932 al vanaf het begin)
   voorkomt dat. Moet ná bovenstaande 100dvh-regel staan (dvh is in die
   foute stand zelf 873). Alleen standalone: in Safari is 100vh groter dan het zichtbare deel. */
@media (display-mode: standalone) {
    html, body { min-height: 100vh; }
}

/* login.php, language.php, install.php: volledige achtergrond in museumkleur */
body.ms-page-branded {
    background: var(--brand-bg);
}

/* login.php, install.php: gecentreerde kaart-layout */
body.ms-page-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.25rem;
    gap: .875rem;
}

.lg-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin-bottom: .25rem;
}

body.ms-page-card .lg-logo img {
    max-height: 50vw;
    max-width: 50vh;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.18));
    border-radius: 25px;
}

body.ms-page-card .lg-museum-name {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--brand-ink);
    text-align: center;
    width: 100%;
    max-width: 420px;
}

.lg-status {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    width: 100%;
    max-width: 420px;
    font-size: .925rem;
    line-height: 1.55;
    text-align: center;
    color: var(--brand-ink);
}

.lg-status strong { font-weight: 700; }

.lg-card {
    background: #fff;
    border-radius: 20px;
    padding: 1.75rem 1.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 32px rgba(0,0,0,.12);
}

.lg-label {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: #1C2B2D;
    margin-bottom: .55rem;
}

.lg-hint {
    font-size: .8rem;
    color: #667;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.lg-input {
    display: block;
    width: 100%;
    padding: .9rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1.5px solid #D0CECE;
    border-radius: 10px;
    outline: none;
    color: #1C2B2D;
    background: #fff;
    transition: border-color .15s;
}

.lg-input:focus { border-color: var(--brand-bg); }

.lg-input-code {
    text-align: center;
    letter-spacing: .55em;
    font-size: 1.6rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: .9rem .5rem;
}

.lg-btn {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: 1rem;
    background: var(--brand-bg);
    color: var(--brand-ink);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: -.01em;
    transition: opacity .15s;
}

.lg-btn:hover  { opacity: .88; }
.lg-btn:active { opacity: .75; }

/* Link naar de privacyverklaring onder het e-mailformulier (login.php) */
.lg-privacy {
    display: block; margin-top: 14px; text-align: center;
    font-size: .8rem; color: #555; text-decoration: underline;
}
.lg-resend {
    display: block;
    margin-top: 1.1rem;
    text-align: center;
    font-size: .875rem;
    color: #555;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    width: 100%;
}

.lg-resend:disabled {
    opacity: .35;
    cursor: default;
    text-decoration: none;
}

.lg-error {
    margin-top: .75rem;
    font-size: .875rem;
    color: #c0392b;
    text-align: center;
}

/* ── Child mode ── */
.lg-child-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    max-width: 420px;
    padding: .7em 1.2em;
    background: #E6F4EF;
    color: #1A6B3C;
    border: 1.5px solid #A8D9CC;
    border-radius: 99px;
    font-size: .9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
}
.lg-child-badge:hover { background: #D6F0E4; }

.lg-child-badge svg { flex-shrink: 0; }

.lg-back-link {
    display: block;
    width: 100%;
    max-width: 420px;
    text-align: center;
    font-size: .875rem;
    color: var(--brand-ink);
    opacity: .75;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    padding: .35rem 0;
}
.lg-back-link:hover { opacity: 1; }

.lg-optin {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: 1rem;
    font-size: .85rem;
    color: #445;
    line-height: 1.45;
    cursor: pointer;
}

.lg-optin input[type="checkbox"] {
    margin-top: .15rem;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    accent-color: var(--brand-bg);
    cursor: pointer;
}

.lg-input-pin {
    background: #E6F4EF;
    border-color: #A8D9CC;
    text-align: center;
    letter-spacing: .45em;
    font-size: 1.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: .9rem .5rem;
}
.lg-input-pin:focus { border-color: #1A6B3C; outline: none; }

.lg-btn-child {
    background: #1A6B3C;
    color: #fff;
}

/* Hoog contrast modus */
html.ig-hc,
html.ig-hc body { background: #000 !important; color: #fff !important; }
html.ig-hc .lg-museum-name { color: #fff !important; }
html.ig-hc .lg-card {
    background: #111 !important;
    border: 2px solid #fff !important;
    color: #fff !important;
}
html.ig-hc .lg-label { color: #fff !important; }
html.ig-hc .lg-input,
html.ig-hc .lg-input-pin {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}
html.ig-hc .lg-input::placeholder { color: #888 !important; }
html.ig-hc .lg-btn {
    background: #fff !important;
    color: #000 !important;
}
html.ig-hc .lg-alert {
    background: #222 !important;
    color: #fff !important;
    border-color: #fff !important;
}
html.ig-hc .lg-hint { color: #ccc !important; }
html.ig-hc .lg-resend { color: #FFFF00 !important; }
html.ig-hc .lg-privacy { color: #FFFF00 !important; }
html.ig-hc *:focus-visible {
    outline: 3px solid #FFFF00 !important;
    outline-offset: 2px !important;
}

/* === language (language.php) === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* language.php: lijst-layout die bovenaan begint i.p.v. centreert */
body.ms-page-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 25vh 1.25rem 2rem;
    gap: 1.5rem;
}

.lg-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin-bottom: .25rem;
}

body.ms-page-list .lg-logo img {
    max-height: 25vw;
    max-width: 25vh;
    width: auto;
    object-fit: contain;
    border-radius: var(--radius, 12px);
}

/* Begroeting met voornaam (applink uit de mail of al ingelogd), language.php + login.php */
.lg-greeting {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--brand-ink);
    text-align: center;
    width: 100%;
    max-width: 420px;
    overflow-wrap: anywhere;
}
html.ig-hc .lg-greeting { color: #fff !important; }

body.ms-page-list .lg-museum-name {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--brand-ink);
    text-align: center;
    width: 100%;
}

.lg-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-ink);
    opacity: .6;
    text-align: center;
    letter-spacing: .01em;
}

.lg-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    max-width: 420px;
}

.lg-lang-btn {
    display: flex;
    align-items: center;
    gap: .875rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 14px;
    padding: .9rem 1.1rem;
    color: var(--brand-ink);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    text-align: start;
    transition: background .15s, opacity .15s;
}

.lg-lang-btn:hover,
.lg-lang-btn:focus { background: rgba(255,255,255,.22); outline: none; }

.lg-flag { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.lg-lang-name { flex: 1; display: flex; flex-direction: column; }
.lg-arrow { opacity: .5; flex-shrink: 0; }

/* Doelgroepkeuze (volwassenen | kinderen) boven de taallijst. Twee radioknoppen in één
   pil; de gekozen kant is gevuld én krijgt een vinkje, zodat de stand niet alleen aan
   kleur af te lezen is. Het kind-icoon is bewust kleiner: groot/klein is het
   pictogram-verschil dat in elke cultuur werkt. */
body.ms-page-list.lg-with-audience {
    padding-top: max(12vh, calc(4.5rem + env(safe-area-inset-top, 0px)));
}

.lg-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 420px;
    margin: 0;
}

.lg-audience {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    width: 100%;
}
.lg-audience legend {
    padding: 0;
    width: 100%;
    margin-bottom: .75rem;
}

.lg-audience-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .375rem;
    padding: .375rem;
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
}

.lg-audience-opt {
    position: relative;
    display: block;
}
/* Radio onzichtbaar maar wel focusbaar/bedienbaar (toetsenbord, schermlezer). */
.lg-audience-opt input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.lg-audience-face {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 96px;
    padding: .75rem .5rem;
    border-radius: 13px;
    border: 2px solid transparent;
    color: var(--brand-ink);
    font-weight: 700;
    font-size: .95rem;
    text-align: center;
    line-height: 1.2;
    transition: background .15s, color .15s;
    pointer-events: none;
}
.lg-audience-opt input:checked + .lg-audience-face {
    background: var(--brand-ink);
    color: var(--brand-bg);
}
.lg-audience-opt input:focus-visible + .lg-audience-face {
    border-color: var(--brand-ink);
    outline: 2px solid var(--brand-bg);
    outline-offset: -5px;
}

/* Vaste hoogte + onderlijn-uitlijning: beide figuren staan op dezelfde "grond". */
.lg-audience-icon {
    height: 44px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.lg-audience-icon .ig-icon { display: block; width: auto; }
.lg-audience-icon-adults   .ig-icon { height: 44px; aspect-ratio: 320 / 512; }
.lg-audience-icon-children .ig-icon { height: 32px; aspect-ratio: 384 / 512; }

.lg-audience-check {
    position: absolute;
    top: .4rem;
    inset-inline-end: .4rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--brand-bg);
    color: var(--brand-ink);
}
.lg-audience-check .ig-icon { width: 13px; height: 13px; stroke-width: 3; }
.lg-audience-opt input:checked + .lg-audience-face .lg-audience-check { display: flex; }

/* Taalrij: klein kind-icoon bij talen mét kindertour; in kindermodus worden talen zonder
   kindertour grijs, met een korte uitleg (:has → werkt ook zonder JavaScript; het script
   in language.php zet ze daarnaast echt op disabled). */
.lg-lang-kids {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: .7;
}
.lg-lang-kids .ig-icon { width: auto; height: 18px; aspect-ratio: 384 / 512; }

.lg-lang-note {
    display: none;
    font-size: .78rem;
    font-weight: 500;
    opacity: .85;
    margin-top: .15rem;
}
.lg-form:has(input[name="audience"][value="children"]:checked) .lg-lang-btn[data-kids="0"] {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}
.lg-form:has(input[name="audience"][value="children"]:checked) .lg-lang-btn[data-kids="0"] .lg-lang-note {
    display: block;
}
.lg-form:has(input[name="audience"][value="children"]:checked) .lg-lang-btn[data-kids="0"] .lg-arrow {
    visibility: hidden;
}

/* Huidige taal (bij een taalwissel halverwege het bezoek). */
.lg-lang-btn[aria-current="true"] {
    border-color: var(--brand-ink);
    border-width: 2px;
}

/* Rechts-naar-links talen (Arabisch, Hebreeuws). */
[dir="rtl"] .lg-arrow { transform: scaleX(-1); }

/* A11y toggle knop: vast linksboven in het scherm */
.lg-a11y-btn {
    position: fixed;
    top: calc(1rem + env(safe-area-inset-top, 0px));
    left: 1rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--brand-ink);
    opacity: .65;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 600;
    font-family: inherit;
    padding: .5rem .875rem;
    border-radius: 20px;
    border: 1px solid var(--brand-ink-a44);
    background: var(--brand-bg);
    transition: opacity .15s, background .15s;
}
.lg-a11y-btn:hover { opacity: 1; background: rgba(255,255,255,.12); }

/* Hoog contrast modus */
html.ig-hc,
html.ig-hc body { background: #000 !important; color: #fff !important; }
html.ig-hc .lg-title { color: #fff !important; opacity: 1; }
html.ig-hc .lg-lang-btn {
    background: #111 !important;
    border-color: #fff !important;
    color: #fff !important;
}
html.ig-hc .lg-lang-btn:hover,
html.ig-hc .lg-lang-btn:focus { background: #222 !important; outline: none; }
html.ig-hc .lg-museum-name { color: #fff !important; }
html.ig-hc .lg-audience-opts { background: #000 !important; border-color: #fff !important; }
html.ig-hc .lg-audience-face { color: #fff !important; }
html.ig-hc .lg-audience-opt input:checked + .lg-audience-face { background: #fff !important; color: #000 !important; }
html.ig-hc .lg-audience-check { background: #000 !important; color: #fff !important; }
html.ig-hc .lg-lang-btn[aria-current="true"] { border-width: 3px !important; }
html.ig-hc .lg-a11y-btn {
    color: #fff !important;
    border-color: #fff !important;
    background: #000 !important;
    opacity: 1;
}
html.ig-hc *:focus-visible {
    outline: 3px solid #FFFF00 !important;
    outline-offset: 2px !important;
}

/* === install (install.php) === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



.iv-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin-bottom: .25rem;
}
.iv-logo img {
    max-height: 56px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.18));
}
.iv-museum-name {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--brand-ink);
    text-align: center;
    width: 100%;
    max-width: 420px;
}

.iv-card {
    background: #fff;
    border-radius: 20px;
    padding: 1.75rem 1.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 32px rgba(0,0,0,.12);
    text-align: center;
}

.iv-app-icon {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    margin: 0 auto 1.1rem;
    display: block;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

.iv-title {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #1C2B2D;
    margin-bottom: .6rem;
}

.iv-body {
    font-size: .95rem;
    line-height: 1.55;
    color: #556;
    margin-bottom: 1.4rem;
}

.iv-btn {
    display: block;
    width: 100%;
    padding: 1rem;
    background: var(--brand-bg);
    color: var(--brand-ink);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: -.01em;
    transition: opacity .15s;
    text-decoration: none;
    text-align: center;
}
.iv-btn:hover  { opacity: .88; }
.iv-btn:active { opacity: .75; }

.iv-later {
    display: block;
    margin-top: 1.1rem;
    text-align: center;
    font-size: .9rem;
    color: #667;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    width: 100%;
}
.iv-later:hover { color: #1C2B2D; }

/* ── iOS instructions ── */
.iv-ios-title {
    font-size: .95rem;
    font-weight: 700;
    color: #1C2B2D;
    margin-bottom: 1rem;
    text-align: left;
}
.iv-steps {
    list-style: none;
    text-align: left;
    margin-bottom: 1.4rem;
}
.iv-step {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 0;
    font-size: .95rem;
    line-height: 1.4;
    color: #334;
}
.iv-step + .iv-step { border-top: 1px solid #F0ECE5; }
.iv-step-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-bg);
    color: var(--brand-ink);
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.iv-share-icon {
    flex-shrink: 0;
    color: var(--brand-bg);
    vertical-align: middle;
}

/* iOS share-arrow hint die naar de systeembalk wijst */
.iv-ios-hint {
    position: fixed;
    left: 50%;
    bottom: .5rem;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    color: var(--brand-ink);
    animation: iv-bounce 1.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes iv-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}

[hidden] { display: none !important; }

/* Hoog-contrast modus */
html.ig-hc, html.ig-hc body { background: #000 !important; }
html.ig-hc .iv-museum-name { color: #fff !important; }
html.ig-hc .iv-card {
    background: #111 !important;
    border: 2px solid #fff !important;
}
html.ig-hc .iv-title { color: #fff !important; }
html.ig-hc .iv-body,
html.ig-hc .iv-step { color: #ddd !important; }
html.ig-hc .iv-ios-title { color: #fff !important; }
html.ig-hc .iv-btn { background: #fff !important; color: #000 !important; }
html.ig-hc .iv-step-num { background: #fff !important; color: #000 !important; }
html.ig-hc .iv-share-icon { color: #fff !important; }
html.ig-hc .iv-later { color: #FFFF00 !important; }
html.ig-hc *:focus-visible {
    outline: 3px solid #FFFF00 !important;
    outline-offset: 2px !important;
}

/* === gedeelde tour-badges (was inc/badge_styles.inc.php, gebruikt door tours.php + poi.php) === */
.ig-badge {
    display: inline-flex;
    align-items: center;
    padding: .18em .55em;
    border-radius: 3px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.ig-badge-primary  { background: var(--brand-bg); color: var(--brand-ink); }
.ig-badge-lang     { background: #fff; color: var(--brand-bg); }
.ig-badge-children { background: #E6F4EF; color: #1A6B3C; }
.ig-badge-outdoor  { background: #E6F0F4; color: #1A5A8C; }

/* === tours (tours.php) === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* tours.php, poi.php: neutrale achtergrond, museumkleur alleen in componenten */
body.ms-page-content {
    background: #FAF8F5;
    color: #1C2B2D;
}

/* ── Tour grid ── */
.ig-tours {
    padding: 1.25rem 1rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 560px;
    margin: 0 auto;
}

/* Eenmalige melding boven de tourlijst (bv. tour niet beschikbaar voor kinderen) */
.ig-tours-notice {
    margin: 0;
    padding: .75rem 1rem;
    border-radius: 12px;
    background: var(--brand-bg-a18);
    border: 1px solid var(--brand-bg-a22);
    color: #1C2B2D;
    font-size: .9375rem;
    line-height: 1.4;
}
html.ig-hc .ig-tours-notice { background: #111 !important; border-color: #fff !important; color: #fff !important; }

/* ── Tour card ── */
.ig-tour-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #E8E1D6;
    display: flex;
    flex-direction: column;
}

/* Volledige foto-area is de start-link */
.ig-tour-thumb {
    height: 180px;
    background-size: cover;
    background-position: center;
    background-color: #E8E1D6;
    flex-shrink: 0;
    position: relative;
    display: block;
    text-decoration: none;
    transition: filter .15s;
}
.ig-tour-thumb:hover,
.ig-tour-thumb:active { filter: brightness(.9); }

.ig-tour-no-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-bg-a22);
    color: #C8BEB4;
}

/* Subtiel play-icoon rechtsboven op de foto */
.ig-tour-play {
    position: absolute;
    top: .65rem;
    right: .65rem;
    width: 34px;
    height: 34px;
    background: rgba(0,0,0,.38);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
}

/* Card body */
.ig-tour-body {
    padding: 1rem 1.1rem 1.1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ig-tour-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .25rem;
    line-height: 1.25;
}
.ig-tour-tagline {
    font-size: .875rem;
    color: #4A5B5D;
    line-height: 1.5;
    margin-bottom: .65rem;
}
/* Meer over de tour knop */
.ig-tour-info-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    align-self: flex-start;
    padding: .38em .75em;
    border: 1.5px solid var(--brand-bg);
    border-radius: 8px;
    background: transparent;
    color: var(--brand-bg);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
}
.ig-tour-info-btn:hover { background: var(--brand-bg-a18); }

/* Gedeelde tours (backstage → Share): vaste regel onder een tour uit een andere collectie */
.ig-tour-credit {
    margin: 0;
    padding: .6rem 1.1rem;
    border-top: 1px solid #E8E1D6;
    font-size: .8rem;
    font-style: italic;
    color: #4A5B5D;
    line-height: 1.4;
}
/* Eigen tour tijdelijk uitgeleend: zichtbaar maar grijs en niet te openen */
.ig-tour-card--lent .ig-tour-thumb { filter: grayscale(1); opacity: .55; }
.ig-tour-card--lent .ig-tour-thumb:hover,
.ig-tour-card--lent .ig-tour-thumb:active { filter: grayscale(1); }
.ig-tour-card--lent .ig-tour-title,
.ig-tour-card--lent .ig-tour-tagline { color: #8A9496; }
.ig-tour-lent {
    margin: 0;
    align-self: flex-start;
    padding: .38em .75em;
    border-radius: 8px;
    background: #EFEBE5;
    color: #4A5B5D;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Badge overlay op de foto */
.ig-tour-badges {
    position: absolute;
    bottom: .65rem;
    left: .65rem;
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

/* ── Favorites-pseudotour: live mozaïek van favoriete thumbnails ── */
.ig-fav-mosaic {
    display: grid;
    gap: 2px;
    background: #E8E1D6;
}
.ig-fav-mosaic-1 { grid-template-columns: 1fr; }
.ig-fav-mosaic-2 { grid-template-columns: 1fr 1fr; }
.ig-fav-mosaic-3,
.ig-fav-mosaic-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
/* 5–8 favorieten: kleinere thumbnails in hetzelfde vlak (ms_fav_mosaic_layout) */
.ig-fav-mosaic-6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.ig-fav-mosaic-8 { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; }
.ig-fav-mosaic-cell {
    background-size: cover;
    background-position: center;
    background-color: var(--brand-bg-a22);
}
.ig-fav-heart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-bg);
    opacity: .35;
}
.ig-fav-heart-empty .ig-icon { width: 40px; height: 40px; }
html.ig-hc .ig-fav-mosaic { background: #333 !important; }
html.ig-hc .ig-fav-mosaic-cell { background-color: #111 !important; }
html.ig-hc .ig-fav-heart-empty { color: #fff !important; }

/* ── App layout tours-overzicht: Raster en Foto-banner (backstage → Tours → App layout) ──
   Zelfde markup als Classic (inc/tour_layouts.inc.php). Foto en tekstvlak delen één gridcel, zodat
   de tekst over de foto valt en het vlak altijd precies zo hoog is als de foto; een
   "From the collection of"-regel komt daaronder. Het taallabel verdwijnt (de taal staat al in de
   topbar), outdoor/kinderen worden ronde iconen linksboven en "More about this tour" een
   rond (i)-knopje rechtsboven. */
.ig-tour-badges .ig-badge .ig-icon { display: none; }

.ig-tours--grid .ig-tour-card,
.ig-tours--banner .ig-tour-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 0;
}
.ig-tours--grid .ig-tour-thumb,
.ig-tours--banner .ig-tour-thumb { grid-area: 1 / 1; }
.ig-tours--grid .ig-tour-body,
.ig-tours--banner .ig-tour-body {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    min-width: 0;
    justify-content: flex-end;
    overflow: hidden;
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,0) 100%);
    color: #fff;
    pointer-events: none;   /* de foto eronder blijft de start-link */
}
.ig-tours--grid .ig-tour-title,
.ig-tours--banner .ig-tour-title { color: #fff; text-wrap: balance; }
.ig-tours--grid .ig-tour-tagline,
.ig-tours--banner .ig-tour-tagline {
    color: rgba(255,255,255,.88);
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ig-tours--grid .ig-tour-lent,
.ig-tours--banner .ig-tour-lent { margin-top: .4rem; }
.ig-tours--grid .ig-tour-play,
.ig-tours--banner .ig-tour-play,
.ig-tours--grid .ig-badge-lang,
.ig-tours--banner .ig-badge-lang { display: none; }

.ig-tours--grid .ig-tour-badges,
.ig-tours--banner .ig-tour-badges { top: .6rem; bottom: auto; left: .6rem; gap: .3rem; }
.ig-tours--grid .ig-tour-badges .ig-badge,
.ig-tours--banner .ig-tour-badges .ig-badge {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.ig-tours--grid .ig-tour-badges .ig-icon,
.ig-tours--banner .ig-tour-badges .ig-icon { display: block; width: 15px; height: 15px; }
.ig-tours--grid .ig-badge-txt,
.ig-tours--banner .ig-badge-txt,
.ig-tours--grid .ig-tour-info-label,
.ig-tours--banner .ig-tour-info-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ig-tours--grid .ig-tour-info-btn,
.ig-tours--banner .ig-tour-info-btn {
    position: absolute;
    top: .6rem;
    right: .6rem;
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.38);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    pointer-events: auto;
}
.ig-tours--grid .ig-tour-info-btn:hover,
.ig-tours--banner .ig-tour-info-btn:hover { background: rgba(0,0,0,.55); }
.ig-tours--grid .ig-tour-info-btn svg,
.ig-tours--banner .ig-tour-info-btn svg { width: 18px; height: 18px; }

/* Foto-banner: volle breedte, lager dan Classic, tekst onderin op de foto */
.ig-tours--banner { gap: .75rem; }
.ig-tours--banner .ig-tour-thumb { height: 150px; }
.ig-tours--banner .ig-tour-body { padding: .85rem 1rem; }
.ig-tours--banner .ig-tour-title { font-size: 1.15rem; margin-bottom: .1rem; }
.ig-tours--banner .ig-tour-tagline { font-size: .82rem; line-height: 1.35; }

/* Raster: twee kolommen staande tegels; een oneven laatste kaart wordt breed (tours.php) */
.ig-tours--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    align-items: start;
}
.ig-tours--grid > .ig-tours-notice,
.ig-tours--grid > .ig-empty { grid-column: 1 / -1; }
.ig-tours--grid .ig-tour-card { border-radius: 14px; }
.ig-tours--grid .ig-tour-thumb { height: auto; aspect-ratio: 4 / 5; }
.ig-tours--grid .ig-tour-card--wide { grid-column: 1 / -1; }
.ig-tours--grid .ig-tour-card--wide .ig-tour-thumb { aspect-ratio: 2 / 1; }
.ig-tours--grid .ig-tour-body { padding: .65rem .7rem; }
.ig-tours--grid .ig-tour-title {
    font-size: .95rem;
    line-height: 1.2;
    margin-bottom: .15rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ig-tours--grid .ig-tour-tagline { font-size: .74rem; line-height: 1.3; }
.ig-tours--grid .ig-tour-badges { top: .5rem; left: .5rem; gap: .25rem; }
.ig-tours--grid .ig-tour-badges .ig-badge { width: 26px; height: 26px; }
.ig-tours--grid .ig-tour-info-btn { top: .45rem; right: .45rem; width: 30px; height: 30px; }
.ig-tours--grid .ig-tour-credit { padding: .45rem .65rem; font-size: .72rem; }

html.ig-hc .ig-tours--grid .ig-tour-body,
html.ig-hc .ig-tours--banner .ig-tour-body {
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,.8) 55%, rgba(0,0,0,.3) 100%) !important;
}
html.ig-hc .ig-tours--grid .ig-tour-info-btn,
html.ig-hc .ig-tours--banner .ig-tour-info-btn { background: #000 !important; border: 1px solid #fff !important; }

/* ── Tour detail popup ── */
.ig-tour-modal-sheet {
    max-height: 82dvh;
    overflow-y: auto;
}
/* Kop met sluitknop blijft staan bij een lange beschrijving (bv. een in-depth text van 8.000 tekens).
   Negatieve marge vult de padding van het venster; samen weer 1.5rem boven en 1.25rem tot de tekst. */
.ig-tour-modal-sheet .ig-modal-header {
    position: sticky;
    top: -1.5rem;
    z-index: 1;
    background: inherit;
    margin: -1.5rem -1.25rem .75rem;
    padding: 1.5rem 1.25rem .5rem;
}

.ig-tour-detail-desc {
    font-size: .9rem;
    line-height: 1.65;
    color: #1C2B2D;
    margin-bottom: 1.25rem;
}
.ig-tour-detail-desc p         { margin-bottom: .6rem; }
.ig-tour-detail-desc p:last-child { margin-bottom: 0; }
.ig-tour-detail-desc strong    { font-weight: 700; }
.ig-tour-detail-desc em        { font-style: italic; }
.ig-tour-detail-desc ul,
.ig-tour-detail-desc ol        { padding-left: 1.25rem; margin-bottom: .6rem; }
.ig-tour-detail-desc li        { margin-bottom: .2rem; }

/* Tourduur (backstage → Settings → Duration): klok + "40 min" bovenaan het info-scherm,
   in de museumkleur (zelfde paar als de knop Start rondleiding). */
.ig-tour-duration {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .35em .8em;
    margin-bottom: 1rem;
    background: var(--brand-bg);
    border-radius: 100px;
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand-ink);
}
.ig-tour-duration .ig-icon { width: 1.1em; height: 1.1em; }

.ig-tour-detail-section { margin-top: 1.25rem; }
.ig-tour-detail-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: .5rem;
}

.ig-tour-detail-langs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.ig-tour-detail-lang {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .3em .65em;
    background: #F0EDE8;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 500;
    color: #1C2B2D;
}

.ig-tour-detail-counts {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}
.ig-tdc {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .75rem .5rem;
    background: #F0EDE8;
    border-radius: 10px;
    text-align: center;
}
.ig-tdc-num {
    font-size: 1.3rem;
    font-weight: 800;
    color: #1C2B2D;
    line-height: 1;
}
.ig-tdc-lbl {
    font-size: .7rem;
    color: #4A5B5D;
    line-height: 1.3;
}

.ig-tour-detail-start {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .9rem 1rem;
    margin-top: 1.5rem;
    background: var(--brand-bg);
    color: var(--brand-ink);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s;
}
.ig-tour-detail-start:hover { opacity: .88; }

/* Empty state */
.ig-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #666;
}

/* Hoog contrast */
html.ig-hc body                  { background: #000 !important; color: #fff !important; }
html.ig-hc .ig-tour-card         { background: #111 !important; border-color: #fff !important; }
html.ig-hc .ig-tour-title        { color: #fff !important; }
html.ig-hc .ig-tour-tagline      { color: #ccc !important; }
html.ig-hc .ig-tour-meta         { color: #aaa !important; }
html.ig-hc .ig-tour-no-photo     { background: #111 !important; }
html.ig-hc .ig-empty             { color: #ccc !important; }
html.ig-hc .ig-tour-play         { background: rgba(255,255,255,.3) !important; }
html.ig-hc .ig-tour-info-btn     { border-color: #fff !important; color: #fff !important; }
html.ig-hc .ig-tour-credit       { border-color: #fff !important; color: #ccc !important; }
html.ig-hc .ig-tour-lent         { background: #333 !important; color: #fff !important; }
html.ig-hc .ig-tour-card--lent .ig-tour-title,
html.ig-hc .ig-tour-card--lent .ig-tour-tagline { color: #999 !important; }
html.ig-hc .ig-tour-detail-desc  { color: #fff !important; }
html.ig-hc .ig-tour-detail-label { color: #aaa !important; }
html.ig-hc .ig-tour-detail-lang  { background: #333 !important; color: #fff !important; }
html.ig-hc .ig-tour-duration      { background: #333 !important; color: #fff !important; }
html.ig-hc .ig-tdc               { background: #333 !important; }
html.ig-hc .ig-tdc-num           { color: #fff !important; }
html.ig-hc .ig-tdc-lbl           { color: #ccc !important; }
html.ig-hc .ig-tour-detail-start { background: #fff !important; color: #000 !important; }
html.ig-hc *:focus-visible { outline: 3px solid #FFFF00 !important; outline-offset: 2px !important; }

/* ── Tour splash screen ── */
.ig-splash {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 8000;
    display: none;
    background: rgba(0,0,0,.92);
}
.ig-splash--active { display: block; }

.ig-splash__photo {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-size: cover;
    background-position: center;
}

/* Portrait photo on portrait devices, landscape on wider screens */
.ig-splash__photo--p { display: block; }
.ig-splash__photo--l { display: none; }
@media (min-aspect-ratio: 1/1) {
    .ig-splash__photo--p { display: none; }
    .ig-splash__photo--l { display: block; }
}

/* Dark gradient over the lower 60% for legibility */
.ig-splash__gradient {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 100%);
    pointer-events: none;
}

/* Progress wrap — centred at 75% from top (= middle of the lower half) */
.ig-splash__progress {
    position: absolute;
    top: 75%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0 2.5rem;
}

.ig-splash__track {
    height: 6px;
    background: rgba(255,255,255,.25);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: .75rem;
}

.ig-splash__fill {
    height: 100%;
    width: 0%;
    background: var(--brand-bg);
    border-radius: 3px;
    transition: width .2s ease-out;
}

.ig-splash__pct {
    text-align: center;
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .05em;
}

/* ── PWA offline-download prompt (alleen in standalone PWA) ── */
.ig-pwa-dl {
    position: fixed; inset: 0; z-index: 9000;
    display: none;
    align-items: center; justify-content: center;
    padding: 1.5rem;
    background: rgba(0,0,0,.6);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ig-pwa-dl.open { display: flex; }
.ig-pwa-dl__card {
    background: #fff; color: #1C2B2D;
    border-radius: 20px;
    padding: 1.75rem 1.5rem;
    max-width: 380px; width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.ig-pwa-dl__icon { font-size: 2.5rem; line-height: 1; margin-bottom: .75rem; }
.ig-pwa-dl__title { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .5rem; }
.ig-pwa-dl__body { font-size: .95rem; line-height: 1.5; color: #44524f; margin-bottom: 1.4rem; }
.ig-pwa-dl__btn {
    display: block; width: 100%;
    padding: .9rem 1.4rem;
    border: none; border-radius: 12px;
    font-size: 1rem; font-weight: 700; font-family: inherit;
    cursor: pointer;
}
.ig-pwa-dl__btn--go { background: var(--brand-bg); color: #fff; margin-bottom: .6rem; }
.ig-pwa-dl__btn--go:active { opacity: .85; }
.ig-pwa-dl__btn--skip { background: transparent; color: #6b7a76; }
.ig-pwa-dl__track { height: 8px; background: #e6ebe9; border-radius: 4px; overflow: hidden; margin: 1rem 0 .6rem; }
.ig-pwa-dl__fill { height: 100%; width: 0%; background: var(--brand-bg); border-radius: 4px; transition: width .2s ease-out; }
.ig-pwa-dl__pct { font-size: .85rem; font-weight: 600; color: #44524f; }
.ig-pwa-dl__detail { font-size: .8rem; color: #6b7a76; margin-top: .35rem; }
html.ig-hc .ig-pwa-dl__detail { color: #ccc !important; }
html.ig-hc .ig-pwa-dl__card { background: #000 !important; color: #fff !important; border: 2px solid #fff; }
html.ig-hc .ig-pwa-dl__body { color: #ccc !important; }
html.ig-hc .ig-pwa-dl__btn--go { background: #fff !important; color: #000 !important; }
html.ig-hc .ig-pwa-dl__btn--skip { color: #ccc !important; }
html.ig-hc .ig-pwa-dl__fill { background: #fff !important; }

/* === poi (poi.php) === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* topbar: zie inc/topbar.inc.php */

/* ── View toggle + zoekbalk ── */
.ig-view-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem .25rem;
    max-width: 540px;
    margin: 0 auto;
}
.ig-search-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .25rem;
    background: #fff;
    border: 1.5px solid #E8E1D6;
    border-radius: 8px;
    padding: 0 .5rem;
    min-width: 0;
    transition: border-color .18s;
}
.ig-search-wrap:focus-within { border-color: var(--brand-bg); }
.ig-search-icon { color: #C0B4AA; flex-shrink: 0; pointer-events: none; }
#ig-search {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: .875rem;
    color: #1C2B2D;
    padding: .52rem 0;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
}
#ig-search::placeholder { color: #C0B4AA; font-style: italic; }
#ig-search::-webkit-search-cancel-button { display: none; }
#ig-search-clear {
    display: none;
    border: none;
    background: none;
    color: #B0A49A;
    cursor: pointer;
    padding: .2rem .1rem;
    font-size: .75rem;
    line-height: 1;
    flex-shrink: 0;
}
#ig-search-clear.visible { display: block; }
.ig-view-tourbadge {
    flex: 1;
    display: none;
    align-items: center;
    background: var(--brand-bg);
    color: var(--brand-ink);
    border-radius: 8px;
    padding: .6rem .8rem;
    min-width: 0;
}
.ig-view-tourbadge span {
    font-size: .875rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ig-view-toggle {
    display: inline-flex;
    background: #E8E1D6;
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
    flex-shrink: 0;
}
.ig-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.ig-view-btn {
    background: none;
    border: none;
    padding: .3rem .55rem;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    opacity: .45;
    transition: background .15s, opacity .15s;
}
.ig-view-btn .ig-icon { width: 18px; height: 18px; }
.ig-view-btn.active {
    background: #fff;
    opacity: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* ── POI card grid ── */
.ig-poi-grid {
    padding: .5rem .75rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .625rem;
    max-width: 540px;
    margin: 0 auto;
}
.ig-poi-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E8E1D6;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.ig-poi-card-thumb {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--brand-bg-a22);
    overflow: hidden;
}
.ig-poi-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ig-poi-card-no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C8BEB4;
}

.ig-poi-card-body {
    position: relative;
    padding: .55rem .6rem .65rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* ── Favoriet-hartje ── */
.ig-poi-fav-btn {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255,255,255,.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
}
.ig-poi-fav-btn .ig-icon { width: 16px; height: 16px; color: var(--brand-bg); }
.ig-poi-fav-btn--item {
    position: static;
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    padding: .25rem;
    flex-shrink: 0;
}
.ig-poi-fav-btn--item .ig-icon { width: 18px; height: 18px; }
html.ig-hc .ig-poi-fav-btn { background: #000 !important; border: 1px solid #fff; }
html.ig-hc .ig-poi-fav-btn--item { border: none; }
html.ig-hc .ig-poi-fav-btn .ig-icon { color: #fff !important; }
.ig-poi-card-title {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #1C2B2D;
}
.ig-poi-card-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    
    gap: .3rem;
}
.ig-poi-badge-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 100px;
    overflow: hidden;
    flex-shrink: 0;
    line-height: 1;

}
.ig-poi-badge-pill-num {
    height: 26px;
    min-width: 26px;
    padding: 0 .45rem;
    background: var(--brand-bg);
    color: var(--brand-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}
.ig-poi-badge-pill-icons {
    height: 26px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 .5rem 0 .35rem;
    background: var(--brand-bg-a1a);
    color: var(--brand-bg);
}
.ig-poi-badge-pill-icons .ig-icon { width: 19.5px; height: 19.5px; }
.ig-poi-meta { display: flex; align-items: center; gap: 3px; flex-shrink: 0; color: #5A6E70; font-size: .85rem; }
.ig-poi-meta .ig-icon { width: 14px; height: 14px; }

/* ── POI list ── */
.ig-poi-list {
    padding: .25rem .75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 540px;
    margin: 0 auto;
}
.ig-poi-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    background: #fff;
    border-radius: 12px;
    padding: .875rem 1rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid #E8E1D6;
}
.ig-poi-number {
    /* min-width + pill-radius: rond bij 1-2 cijfers, groeit mee bij langere
       nummers (bv. 12045 = verdieping/zaal/object) i.p.v. eruit te lopen. */
    min-width: 36px;
    height: 36px;
    padding: 0 .55rem;
    border-radius: 100px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ig-poi-name {
    font-size: .95rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
}
.ig-poi-arrow { color: #bbb; flex-shrink: 0; }

/* ── App layout lijstweergave: Compact en Featured (backstage → Tours → App layout) ──
   Markup per variant in inc/tour_layouts.inc.php (ms_render_poi_list_item). Compact = vierkante
   foto links, naam en nummer/iconen rechts. Featured = eerste stop groot (hero), de rest als
   compacte rijen met een scheidingslijn. */
.ig-poi-item--compact { padding: .5rem; gap: .75rem; }
.ig-poi-item-thumb {
    position: relative;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--brand-bg-a22);
}
.ig-poi-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ig-poi-item-no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C8BEB4;
}
.ig-poi-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.ig-poi-item-main .ig-poi-name {
    flex: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ig-poi-item-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}
.ig-poi-item-sub .ig-poi-number {
    min-width: 24px;
    height: 24px;
    padding: 0 .4rem;
    font-size: .72rem;
}

.ig-poi-list--featured { gap: 0; }
.ig-poi-item--hero {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: .75rem;
    color: #fff;
}
.ig-poi-item--hero .ig-poi-item-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 0;
}
.ig-poi-item--hero .ig-poi-item-main {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem 1rem .9rem;
    gap: .4rem;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 100%);
}
.ig-poi-item--hero .ig-poi-item-sub { order: -1; }
.ig-poi-item--hero .ig-poi-name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #fff;
}
.ig-poi-item--hero .ig-poi-number { min-width: 30px; height: 30px; font-size: .85rem; }
.ig-poi-item--hero .ig-poi-meta { color: #fff; }
.ig-poi-item--hero .ig-poi-meta .ig-icon { width: 16px; height: 16px; }
.ig-poi-item--hero.is-gps-near { box-shadow: 0 0 0 3px var(--brand-bg); }

.ig-poi-list--featured .ig-poi-item--compact {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #E8E1D6;
    border-radius: 0;
    padding: .55rem .25rem;
}
.ig-poi-list--featured .ig-poi-item--compact:last-child { border-bottom: 0; }
.ig-poi-list--featured .ig-poi-item--compact .ig-poi-item-thumb { width: 60px; height: 60px; }
.ig-poi-list--featured .ig-poi-item--compact.is-gps-near { background: var(--brand-bg-a14); border-radius: 10px; }

html.ig-hc .ig-poi-item-thumb { background: #222 !important; }
html.ig-hc .ig-poi-item--hero .ig-poi-item-main { background: linear-gradient(to top, #000 0%, rgba(0,0,0,.4) 100%) !important; }
html.ig-hc .ig-poi-item--compact .ig-poi-meta { color: #ccc !important; }

/* ── QR-scanner ── */
.ig-scan-wrap {
    padding: .75rem .75rem 1.5rem;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.ig-scan-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 20px;
    overflow: hidden;
    background: #10171a;
}
.ig-scan-viewport video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ig-scan-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62%;
    aspect-ratio: 1/1;
    max-width: 220px;
    border: 3px solid #fff;
    border-radius: 18px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.5);
    overflow: hidden;
}
.ig-scan-frame.is-hit { border-color: #4CAF6A; }
.ig-scan-line {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 8%;
    height: 2px;
    background: var(--brand-bg);
    box-shadow: 0 0 8px var(--brand-bg);
    animation: ig-scan-sweep 2.2s ease-in-out infinite;
}
@keyframes ig-scan-sweep {
    0%, 100% { top: 8%; }
    50%      { top: 90%; }
}
@media (prefers-reduced-motion: reduce) {
    .ig-scan-line { animation: none; }
}
.ig-scan-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: .8rem 1rem;
    background: rgba(10,14,16,.7);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: #fff;
    text-align: center;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.4;
    transition: background .15s;
}
.ig-scan-banner.is-error   { background: rgba(179,38,30,.85); }
.ig-scan-banner.is-success { background: rgba(46,125,70,.88); }

/* NFC-knop onder de camera (alleen zichtbaar als de browser Web NFC kan) */
.ig-scan-nfc-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--brand-bg);
    color: var(--brand-ink);
    border: none;
    border-radius: 999px;
    padding: .7rem 1.2rem .7rem .9rem;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
}
.ig-scan-nfc-btn[hidden] { display: none; }
.ig-scan-nfc-btn .ig-icon { width: 20px; height: 20px; }
.ig-scan-nfc-btn.is-active .ig-icon { animation: ig-nfc-pulse 1.4s ease-in-out infinite; }
@keyframes ig-nfc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ig-scan-nfc-btn.is-active .ig-icon { animation: none; } }
html.ig-hc .ig-scan-nfc-btn { background: #fff !important; color: #000 !important; }

/* POI detail */
.ig-poi-detail { padding-bottom: 5rem; }

/* ── Foto slider ── */
.ig-poi-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 3/2;
    overflow: hidden;
    background: var(--brand-bg-a22);
}
.ig-num-badge-overlay {
    position: absolute;
    bottom: .625rem;
    left: .625rem;
    z-index: 10;
    font-size: .9rem;
    font-weight: 700;
    padding: .2em .55em;
    border-radius: 6px;
    background: var(--brand-bg);
    color: var(--brand-ink);
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.ig-poi-slides {
    display: flex;
    height: 100%;
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
@keyframes ig-slider-peek {
    0%   { transform: translateX(0);    }
    35%  { transform: translateX(-10%); }
    65%  { transform: translateX(-10%); }
    100% { transform: translateX(0);    }
}
.ig-poi-slides.ig-peek {
    animation: ig-slider-peek .85s ease-in-out;
    transition: none;
}
.ig-poi-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Before/After slide ── */
.ig-ba-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: ew-resize;
    touch-action: pan-y; /* laat verticaal scrollen toe, onderschep alleen horizontaal */
    user-select: none;
    -webkit-user-select: none;
}
.ig-ba-after {
    position: absolute;
    inset: 0;
}
.ig-ba-after img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.ig-ba-before {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
    transition: clip-path .0s; /* geen transitie — volgt vinger live */
}
.ig-ba-before img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.ig-ba-handle {
    position: absolute;
    left: var(--ba-pos, 50%);
    top: 0; bottom: 0;
    width: 0;
    z-index: 5;
    pointer-events: none;
    transform: translateX(-50%);
}
.ig-ba-line {
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 2px;
    background: #fff;
    transform: translateX(-50%);
    box-shadow: 0 0 6px rgba(0,0,0,.45);
}
.ig-ba-btn {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.38);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1C2B2D;
}
.ig-ba-label {
    position: absolute;
    bottom: .6rem;
    background: rgba(0,0,0,.52);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .15em .55em;
    border-radius: 4px;
    pointer-events: none;
    z-index: 4;
}
.ig-ba-label-before { left: .6rem; }
.ig-ba-label-after  { right: .6rem; }

.ig-poi-dots {
    position: absolute;
    bottom: .625rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .4rem;
    z-index: 2;
}
.ig-poi-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.45);
    padding: 0;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.ig-poi-dot.active {
    background: #fff;
    transform: scale(1.35);
}
.ig-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.32);
    color: #fff;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 0 .05rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2;
    transition: background .15s;
}
.ig-slider-btn:hover { background: rgba(0,0,0,.5); }
.ig-slider-btn:disabled { opacity: .25; pointer-events: none; }
.ig-slider-prev { left: .625rem; }
.ig-slider-next { right: .625rem; }

.ig-poi-cover-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--brand-bg);
    opacity: .3;
}

.ig-poi-body {
    padding: 1.25rem 1.25rem 1.5rem;
    max-width: 600px;
    margin: 0 auto;
}

.ig-poi-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.025em;
    margin-bottom: .35rem;
}

/* ── POI head-badge (nummer + titel + tour) ── */
.ig-poi-headbadge {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .35rem 1.1rem .35rem .35rem;
    background: var(--brand-bg-a1a);
    border-radius: 100px;
    margin-bottom: 1rem;
}
.ig-poi-headbadge-num {
    flex-shrink: 0;
    /* Zie .ig-poi-number: groeit mee met lange POI-nummers. */
    min-width: 56px;
    height: 56px;
    padding: 0 .7rem;
    border-radius: 100px;
    white-space: nowrap;
    background: var(--brand-bg);
    color: var(--brand-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}
.ig-poi-headbadge-text { min-width: 0; flex: 1; }
/* Spel-uitleg (?): uiterst rechts in de badge, tegenover het nummer; de pill-padding rechts wordt
   deels opgeheven zodat de knop net zo ver van de rand staat als het nummer links */
.ig-poi-headbadge-help {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    margin-right: -.75rem;
    border: none;
    border-radius: 50%;
    background: var(--brand-bg);
    color: var(--brand-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s;
}
.ig-poi-headbadge-help:active { transform: scale(.92); }
.ig-poi-headbadge-help:focus-visible { outline: 2px solid var(--brand-bg); outline-offset: 2px; }
.ig-poi-headbadge-title {
    color: var(--brand-bg);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: -.02em;
}
.ig-poi-headbadge-tour {
    color: var(--brand-bg);
    opacity: .55;
    font-size: .85rem;
    font-weight: 500;
    margin-top: .15rem;
}
html.ig-hc .ig-poi-headbadge { background: #111 !important; border: 1px solid #fff; }
html.ig-hc .ig-poi-headbadge-title,
html.ig-hc .ig-poi-headbadge-tour { color: #fff !important; opacity: 1; }
html.ig-hc .ig-poi-headbadge-help { background: #fff !important; color: #111 !important; }

/* ── POI tekst-kaart (zelfde stijl als head-badge) ── */
.ig-poi-textcard {
    background: var(--brand-bg-a1a);
    border-radius: 18px;
    padding: 1rem 1.25rem;
}
html.ig-hc .ig-poi-textcard { background: #111 !important; border: 1px solid #fff; }
html.ig-hc .ig-poi-textcard .ig-poi-text { color: #fff !important; }

/* Jaartal (of periode 1950–1952) met kalender-icoon. Standaard een losse pill boven
   de tekst (video, puzzel, geen foto); --overlay = rechtsonder over de foto,
   spiegelbeeld van het POI-nummer linksonder. */
.ig-year-badge {
    display: flex;
    align-items: center;
    gap: .35em;
    width: fit-content;
    margin-left: auto;
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand-bg);
    background: var(--brand-bg-a1a);
    border-radius: 100px;
    padding: .35em .9em;
    margin-bottom: .75rem;
}
.ig-year-badge .ig-icon { width: 1.05em; height: 1.05em; }
.ig-year-badge--overlay {
    position: absolute;
    bottom: .625rem;
    right: .625rem;
    z-index: 10;
    margin: 0;
    font-size: .9rem;
    line-height: 1.4;
    padding: .2em .55em;
    border-radius: 6px;
    background: var(--brand-bg);
    color: var(--brand-ink);
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
html.ig-hc .ig-year-badge { background: #111 !important; color: #fff !important; border: 1px solid #fff; }

.ig-poi-text {
    font-size: .95rem;
    line-height: 1.7;
    color: #2A3A3C;
}

.ig-poi-text p { margin-bottom: .75rem; }
.ig-poi-text h2, .ig-poi-text h3 { margin: 1rem 0 .4rem; font-weight: 700; }
.ig-poi-text ul, .ig-poi-text ol { padding-left: 1.4rem; margin-bottom: .75rem; }

/* ── Immersive audio player (Apple Music-indeling) ──
   --ap-tint: kleur uit de foto, gezet door js/ap-tint.js op <html> (begrensd zodat wit erop
   leesbaar blijft). Geregistreerd als <color> zodat hij bij een nieuwe achtergrondfoto
   vloeiend meeloopt. Browsers zonder color-mix() krijgen een neutraal donker verloop. */
@property --ap-tint {
    syntax: '<color>';
    inherits: true;
    initial-value: #2b2723;
}
html:has(.ig-audio-player) { transition: --ap-tint 1.2s ease; }
html.ig-hc { --ap-tint: #000 !important; }

.ig-audio-player {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow: hidden;
    background: var(--ap-tint);
    color: #fff;
}
.ig-ap-bg { position: absolute; inset: 0; }
.ig-ap-bg-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
.ig-ap-bg-slide.active { opacity: 1; }
/* Onderste deel van de foto vervaagt geleidelijk (Apple-achtig), het verloop kleurt het in */
.ig-ap-blur {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    -webkit-backdrop-filter: blur(26px) saturate(1.15);
    backdrop-filter: blur(26px) saturate(1.15);
    -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 66%);
    mask-image: linear-gradient(to bottom, transparent 40%, #000 66%);
}
.ig-ap-gradient {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 38%,
        rgba(0,0,0,.45) 62%, rgba(0,0,0,.8) 100%);
    background: linear-gradient(to bottom,
        rgba(0,0,0,.28) 0%,
        rgba(0,0,0,0) 14%,
        color-mix(in srgb, var(--ap-tint) 0%, transparent) 38%,
        color-mix(in srgb, var(--ap-tint) 45%, transparent) 54%,
        color-mix(in srgb, var(--ap-tint) 74%, transparent) 74%,
        color-mix(in srgb, var(--ap-tint) 92%, transparent) 100%);
}
.ig-ap-content {
    position: relative; z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Echte topbarhoogte (incl. statusbalk, gezet in inc/topbar.inc.php) — met een vaste 56px
       viel de inhoud op een iPhone met notch/Dynamic Island onder de topbar. */
    padding-top: var(--ig-topbar-h, 56px);
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
    overflow: hidden;
}
/* Kolom met speler-onderdelen, onderaan het scherm */
.ig-ap-main {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 calc(clamp(1.1rem, 6vw, 1.75rem) + env(safe-area-inset-right)) .5rem
             calc(clamp(1.1rem, 6vw, 1.75rem) + env(safe-area-inset-left));
}
.ig-ap-thumb { display: none; }
/* Titel + ondertitel */
.ig-ap-meta { min-width: 0; margin-bottom: .9rem; }
.ig-ap-title {
    font-size: 1.4rem; font-weight: 700;
    line-height: 1.2; letter-spacing: -.02em;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ig-ap-subtitle {
    margin-top: .1rem;
    font-size: 1.15rem; font-weight: 400;
    line-height: 1.3;
    color: rgba(255,255,255,.72);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Voortgang: dikke afgeronde balk, wordt dikker tijdens slepen */
.ig-ap-progress { flex-shrink: 0; }
.ig-ap-bar {
    height: 26px;
    display: flex; align-items: center;
    cursor: pointer;
    touch-action: none;
}
.ig-ap-bar-track {
    position: relative;
    width: 100%; height: 7px;
    border-radius: 4px;
    background: rgba(255,255,255,.28);
    overflow: hidden;
    transition: height .18s ease;
}
.ig-ap-bar.dragging .ig-ap-bar-track { height: 12px; border-radius: 6px; }
.ig-ap-bar-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0%;
    background: rgba(255,255,255,.92);
    pointer-events: none;
}
.ig-ap-times {
    display: flex; justify-content: space-between;
    margin-top: -.15rem;
}
.ig-ap-time {
    color: rgba(255,255,255,.62);
    font-size: .75rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* Transport: 10 s · [vorige] · play · [volgende] · 10 s */
.ig-ap-transport {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1.4rem auto 1.75rem;
    width: 100%;
    max-width: 290px;
    flex-shrink: 0;
}
.is-multi .ig-ap-transport { max-width: 380px; }
.ig-ap-play,
.ig-ap-skip {
    border: none; background: none;
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: transform .12s, opacity .15s, background .2s;
    -webkit-tap-highlight-color: transparent;
}
.ig-ap-play { width: 72px; height: 72px; }
.ig-ap-skip { width: 54px; height: 54px; }
.ig-ap-play:active,
.ig-ap-skip:active { transform: scale(.86); background: rgba(255,255,255,.12); }
.ig-ap-skip:disabled { opacity: .32; cursor: default; }
.ig-ap-skip:disabled:active { transform: none; background: none; }
.ig-ap-ctrl {
    position: relative;
    width: 46px; height: 46px;
    border: none; background: none;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: .88;
    transition: opacity .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.ig-ap-ctrl:active { transform: scale(.86); opacity: 1; }
.ig-ap-ctrl-num {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .53rem; font-weight: 900; color: #fff;
    margin-top: 6px; pointer-events: none;
}
.ig-ap-ctrl.no-transcript { opacity: .28; pointer-events: none; }
/* Knoppenrij: transcript links, [info | fullscreen] als pil in het midden, afspeellijst rechts */
.ig-ap-controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    flex-shrink: 0;
}
.ig-ap-controls-side { display: flex; }
.ig-ap-controls-end  { justify-content: flex-end; }
.ig-ap-controls-side .ig-ap-ctrl { width: 44px; height: 44px; margin: 0 -.35rem; }
.ig-ap-pill {
    display: flex;
    background: rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    overflow: hidden;
}
.ig-ap-pill .ig-ap-ctrl { width: 54px; height: 40px; border-radius: 0; }
.ig-ap-pill .ig-ap-ctrl + .ig-ap-ctrl { box-shadow: inset 1px 0 0 rgba(255,255,255,.2); }
.ig-ap-pill .ig-ap-ctrl:active { transform: none; background: rgba(255,255,255,.14); }
html.ig-hc .ig-ap-pill { background: #000; border: 1px solid #fff; }
/* Vorige/volgende stop in de pil: alleen in fullscreen (anders staat de onderbalk in beeld).
   Geen vorige/volgende stop = gedimd i.p.v. weg, zodat het kruisje niet verspringt. */
.ig-ap-pill .ig-ap-stop { display: none; text-decoration: none; }
body.ig-ap-fs .ig-ap-pill .ig-ap-stop { display: flex; width: 48px; }
.ig-ap-pill .ig-ap-stop.is-disabled { opacity: .3; pointer-events: none; }
body:not(.ig-ap-fs) .ig-ap-pill .ig-ap-stop + .ig-ap-ctrl { box-shadow: none; }

/* Afspeellijst-sheet: van onderen, zo hoog als nodig (max 80 %), effen in de verloopkleur */
.ig-ap-pl-overlay {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(0,0,0,0);
    visibility: hidden;
    transition: background .3s ease, visibility 0s linear .34s;
}
.ig-ap-pl-overlay.open {
    visibility: visible;
    background: rgba(0,0,0,.35);
    transition: background .3s ease;
}
.ig-ap-pl {
    width: 100%; max-width: 560px;
    max-height: 80dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--ap-tint);
    color: #fff;
    border-radius: 22px 22px 0 0;
    padding: .5rem 0 calc(1rem + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(0,0,0,.35);
    transform: translateY(100%);
    transition: transform .34s cubic-bezier(.32,.72,0,1);
}
.ig-ap-pl-overlay.open .ig-ap-pl { transform: translateY(0); }
.ig-ap-pl.dragging { transition: none; }
.ig-ap-pl-handle {
    width: 38px; height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,.4);
    margin: .25rem auto .85rem;
}
.ig-ap-pl-head {
    padding: 0 1.5rem .5rem;
    font-size: .75rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    color: rgba(255,255,255,.6);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ig-ap-tracks {
    display: flex;
    flex-direction: column;
    padding: 0 .625rem;
}
.ig-ap-track {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    border: none;
    border-radius: 12px;
    background: none;
    padding: .85rem .875rem;
    color: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .2s;
    -webkit-tap-highlight-color: transparent;
}
.ig-ap-track:active { background: rgba(255,255,255,.08); }
.ig-ap-track.active { background: rgba(255,255,255,.14); }
.ig-ap-track-num {
    width: 1.25rem; flex-shrink: 0;
    text-align: right;
    font-size: .85rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,.55);
}
.ig-ap-track-title {
    flex: 1; min-width: 0;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
}
html.ig-hc .ig-ap-pl { background: #000 !important; border-top: 1px solid #fff; }
/* Waveform bij de actieve track */
.ig-ap-wave {
    display: flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .2s;
}
.ig-ap-track.active .ig-ap-wave { opacity: .5; }
.ig-ap-track.active.playing .ig-ap-wave { opacity: 1; }
.ig-ap-wave span {
    display: block; width: 3px;
    border-radius: 2px; background: currentColor;
    transform-origin: bottom;
}
.ig-ap-wave span:nth-child(1) { height: 8px; }
.ig-ap-wave span:nth-child(2) { height: 14px; }
.ig-ap-wave span:nth-child(3) { height: 6px; }
@keyframes ig-wave-anim {
    0%,100% { transform: scaleY(.35); }
    50%     { transform: scaleY(1);   }
}
.ig-ap-track.active.playing .ig-ap-wave span:nth-child(1) { animation: ig-wave-anim .7s ease-in-out infinite; }
.ig-ap-track.active.playing .ig-ap-wave span:nth-child(2) { animation: ig-wave-anim .7s ease-in-out .18s infinite; }
.ig-ap-track.active.playing .ig-ap-wave span:nth-child(3) { animation: ig-wave-anim .7s ease-in-out .36s infinite; }

/* ── Landscape: vierkante foto links, content rechts ──
   Hoogte die overblijft tussen topbar (56px) en POI-nav (64px), met 1rem lucht
   boven en onder — de vierkante foto is nooit hoger dan dat en nooit breder dan
   de helft van het scherm. */
.ig-poi-slide-pic { display: contents; }
@media (orientation: landscape) {
    :root {
        --ig-split-h: calc(100dvh - 56px - 64px - 2rem
                      - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    /* Audiospeler: effen vlak in de verloopkleur, vierkante foto links, bediening rechts */
    .ig-audio-player { background: var(--ap-tint); }
    .ig-ap-bg, .ig-ap-blur { display: none; }
    .ig-ap-gradient {
        background: linear-gradient(to bottom, rgba(255,255,255,.04), rgba(0,0,0,.22));
    }
    /* Grid i.p.v. flex: de rij is zo hoog als de vierkante foto, de rechterkolom rekt mee.
       Zo staat de knoppenrij precies op de onderkant van de foto. */
    .ig-ap-content {
        display: grid;
        grid-template-columns: auto minmax(0, 520px);
        align-content: center;
        justify-content: center;
        column-gap: clamp(1.5rem, 5vw, 4rem);
        padding: calc(var(--ig-topbar-h, 56px) + 1rem) calc(1.5rem + env(safe-area-inset-right))
                 calc(64px + 1rem + env(safe-area-inset-bottom)) calc(1.5rem + env(safe-area-inset-left));
    }
    .ig-ap-content:not(:has(.ig-ap-thumb)) { grid-template-columns: minmax(0, 520px); }
    .ig-ap-thumb {
        display: block;
        position: relative;
        width: min(44vw, var(--ig-split-h));
        aspect-ratio: 1;
        align-self: end;      /* is de bediening toch hoger: onderkanten blijven gelijk */
        border-radius: 12px;
        overflow: hidden;
        background: var(--brand-bg);
        box-shadow: 0 12px 40px rgba(0,0,0,.4);
    }
    .ig-ap-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* Past het niet, dan scrolt de kolom i.p.v. de titel af te knippen. */
    .ig-ap-main {
        max-width: none;
        margin: 0;
        padding: 0;
        align-self: stretch;
        max-height: var(--ig-split-h);
        min-width: 0;
        overflow-y: auto;
        scrollbar-width: none;
    }
    /* Knoppenrij op de onderkant van de foto. Titel + voortgang staan waar ze stonden toen
       het hele blok (titel t/m afspeelknoppen) verticaal gecentreerd was: de lege ruimte
       wordt gelijk verdeeld over een spacer bovenaan (::before) en het transportvak. Dat
       vak vult dus de ruimte tussen voortgangsbalk en knoppenrij, en de afspeelknoppen
       staan daarin precies in het midden. Basishoogte van het vak = knoppen + 24px
       (de oude .5rem erboven + .75rem/4px eronder), zodat titel en balk niet verschuiven. */
    .ig-ap-main::before { content: ''; flex: 1 0 0; }
    .ig-ap-meta      { margin-bottom: .6rem; }
    .ig-ap-title     { font-size: 1.3rem; }
    .ig-ap-subtitle  { font-size: 1.05rem; }
    .ig-ap-transport { flex: 1 0 auto; margin: 0 auto; padding: 12px 0; }
    .ig-ap-controls  { align-items: end; }
    .ig-ap-controls-side .ig-ap-ctrl { height: 40px; } /* zelfde hoogte als de pil: rij is 40px */
    .ig-ap-play      { width: 60px; height: 60px; }
    .ig-ap-skip      { width: 48px; height: 48px; }
    .ig-ap-pl        { max-height: 85dvh; }

    /* Foto + tekst: vierkante foto blijft staan, tekst scrolt ernaast */
    .ig-poi-detail--split {
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 1rem calc(1.25rem + env(safe-area-inset-right))
                 5rem calc(1.25rem + env(safe-area-inset-left));
    }
    .ig-poi-detail--split > .ig-poi-slider,
    .ig-poi-detail--split > .ig-poi-cover-placeholder,
    .ig-poi-detail--split > .ig-hm-photo {
        position: sticky;
        top: calc(56px + 1rem + env(safe-area-inset-top));
        width: min(50%, var(--ig-split-h));
        aspect-ratio: 1;
        flex-shrink: 0;
        border-radius: 16px;
    }
    .ig-poi-detail--split > .ig-poi-body {
        flex: 1;
        min-width: 0;
        padding: 0;
        margin: 0;
    }
}

/* Gewone audioweergave: zelfde iOS-PWA-kwestie als hieronder bij fullscreen — de te korte
   viewport bij openen liet onder de POI-nav een lichte strook zien. In de museumkleur van de
   nav valt die weg. (Staat vóór de fullscreen-regels, die bij gelijke specificiteit winnen.) */
html:has(.ig-audio-player),
body.ms-page-content:has(.ig-audio-player) { background: var(--brand-bg); }
/* Niets te scrollen op de audiopagina: geen iOS-"rubber band" bij omlaagtrekken, waarbij de
   topbar (in de flow) meeschoof en de vaste speler erachter zichtbaar werd. */
html:has(.ig-audio-player) { overscroll-behavior: none; }

/* Audiospeler fullscreen — JS-driven (.ig-ap-fs op body, knop #ig-ap-fs-btn):
   topbar + POI-nav verdwijnen, de speler gebruikt de vrijgekomen ruimte. Dezelfde
   knop toont dan het verklein-icoon om terug te gaan. */
.ig-ap-fs-shrink { display: none; }
body.ig-ap-fs .ig-ap-fs-expand { display: none; }
body.ig-ap-fs .ig-ap-fs-shrink { display: block; }
body.ig-ap-fs .ig-topbar,
body.ig-ap-fs .ig-menu,               /* dicht menu ligt achter de topbar; zonder topbar piept het onderste item eruit */
body.ig-ap-fs .ig-menu-backdrop,
body.ig-ap-fs .ig-update-banner,      /* update- en enquêtebalk: sticky onder de topbar, z boven de speler */
body.ig-ap-fs .ig-poi-nav,
body.ig-ap-fs .ig-scan-return-fab { display: none !important; }
/* iOS-PWA rekent bij het openen de viewport soms te kort (strook ter hoogte van de
   home-indicator) tot de eerste scroll; dan scheen de lichte body (#FAF8F5) eronder door.
   De verloopkleur sluit naadloos aan op de onderkant van .ig-ap-gradient. */
html:has(body.ig-ap-fs),
body.ig-ap-fs.ms-page-content { background: var(--ap-tint); }
/* POI-nummer op de achtergrond valt normaal achter de POI-nav; in fullscreen niet tonen
   zodat het niet ineens linksonder verschijnt. */
body.ig-ap-fs .ig-ap-content {
    padding-top: calc(.5rem + env(safe-area-inset-top));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
@media (orientation: landscape) {
    body.ig-ap-fs {
        --ig-split-h: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
    body.ig-ap-fs .ig-ap-content {
        padding-top: calc(1rem + env(safe-area-inset-top));
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}
/* Bottom sheets */
.ig-sheet-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.5); z-index: 300;
    align-items: flex-end; justify-content: center;
}
.ig-sheet-overlay.open { display: flex; }
.ig-sheet {
    background: #FAF8F5;
    border-radius: 20px 20px 0 0;
    width: 100%; max-width: 560px;
    max-height: 75dvh;
    display: flex; flex-direction: column;
    animation: igSlideUp .22s ease-out;
}
/* Omlaag vegen (poi.php swipeToClose): volgt de vinger, veert terug of glijdt weg */
.ig-sheet          { transition: transform .22s ease-out; }
.ig-sheet.dragging { transition: none; }
.ig-sheet.closing  { transition: transform .24s ease-in; }
.ig-sheet-handle {
    width: 36px; height: 4px;
    background: #D8CFC4; border-radius: 2px;
    margin: .75rem auto .25rem; flex-shrink: 0;
}
.ig-sheet-header {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: .375rem 1.25rem .75rem;
    border-bottom: 1px solid #E8E1D6; flex-shrink: 0;
}
.ig-sheet-title { font-size: .95rem; font-weight: 700; color: #1C2B2D; }
.ig-sheet-close {
    width: 30px; height: 30px; border: none;
    background: #E8E1D6; border-radius: 50%; cursor: pointer;
    color: #1C2B2D; font-size: .78rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background .15s;
}
.ig-sheet-close:hover { background: #D8CFC4; }
.ig-sheet-body {
    padding: 1rem 1.25rem 2.5rem;
    overflow-y: auto; flex: 1;
    -webkit-overflow-scrolling: touch;
    font-size: .92rem; line-height: 1.7; color: #1C2B2D;
}
.ig-sheet-body p { margin-bottom: .75rem; }
.ig-sheet-body h2, .ig-sheet-body h3 { margin: 1rem 0 .4rem; font-weight: 700; }
.ig-sheet-body ul, .ig-sheet-body ol { padding-left: 1.4rem; margin-bottom: .75rem; }
/* Spel-uitleg: schuift helemaal van onderen in beeld, iets grotere tekst voor jonge spelers */
.ig-game-help-overlay .ig-sheet { animation: igSheetUp .28s ease-out; }
.ig-game-help-overlay .ig-sheet-body { font-size: 1rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
.ig-game-help-overlay .ig-sheet-body p { margin-bottom: 0; }
@keyframes igSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ── Ask the guide (inc/ask_sheet.inc.php) ──
   Docent-knop (baret) linksonder op de afbeelding. Staat daar al iets (voor-label, stopnummer), dan erboven. */
.ig-ask-btn {
    position: absolute;
    left: .625rem;
    bottom: .625rem;
    z-index: 11;
    width: 46px; height: 46px;
    border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-bg);
    color: var(--brand-ink);
    box-shadow: 0 3px 10px rgba(0,0,0,.3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease;
}
.ig-ask-btn:active { transform: scale(.94); }
.ig-ask-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ig-poi-slider:has(.ig-ba-slide) .ig-ask-btn { bottom: calc(.625rem + 40px); }
.ig-poi-cover-wrap { position: relative; }
/* Audiospeler staand: zwevend links boven de titel (op de foto), zonder de indeling te verschuiven */
.ig-ap-meta:has(.ig-ask-btn--ap) { position: relative; }
.ig-ask-btn--ap { left: 0; bottom: calc(100% + .9rem); }
.ig-ask-btn--thumb { display: none; }
/* Stopnummer in de audiospeler links van de tournaam, in een eigen kolom: tournaam en POI-naam
   beginnen allebei rechts ervan, links uitgelijnd (staand en liggend) */
.ig-ap-meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .6rem;
    align-items: center;
}
.ig-ap-num {
    grid-column: 1; grid-row: 1;
    font-size: .9rem; font-weight: 700; line-height: 1.4;
    padding: .2em .55em;
    border-radius: 6px;
    background: var(--brand-bg);
    color: var(--brand-ink);
    white-space: nowrap;
}
.ig-ap-title, .ig-ap-subtitle { grid-column: 2; }
@media (orientation: landscape) {
    /* Liggend met vierkante foto links: de knop op die foto, niet boven de titel */
    .ig-ap-content:has(.ig-ap-thumb) .ig-ask-btn--ap { display: none; }
    .ig-ask-btn--thumb { display: flex; }
}
html.ig-hc .ig-ask-btn { background: #111 !important; color: #fff !important; border: 1px solid #fff; }

.ig-ask-overlay .ig-sheet { animation: igSheetUp .28s ease-out; max-height: 85dvh; }
.ig-ask-body { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
.ig-ask-popular { margin-bottom: 1rem; }
.ig-ask-popular-label,
.ig-ask-sources > span {
    display: block;
    font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #6B7B7D; margin-bottom: .5rem;
}
.ig-ask-popular-list { display: flex; flex-direction: column; gap: .5rem; }
.ig-ask-chip {
    text-align: left;
    font: inherit; font-size: .9rem; line-height: 1.4; color: #1C2B2D;
    background: #fff;
    border: 1px solid #E8E1D6; border-radius: 12px;
    padding: .65rem .85rem;
    cursor: pointer;
}
.ig-ask-chip:active { background: #F1ECE4; }
.ig-ask-form { position: relative; display: flex; gap: .5rem; align-items: flex-end; }
.ig-ask-form textarea {
    flex: 1; min-width: 0;
    font: inherit; font-size: 1rem; line-height: 1.45; color: #1C2B2D;
    background: #fff;
    border: 1px solid #D8CFC4; border-radius: 12px;
    padding: .65rem .8rem;
    resize: none;
}
.ig-ask-form textarea:focus { outline: none; border-color: var(--teal, #2A7F7A); box-shadow: 0 0 0 3px rgba(42,127,122,.15); }
.ig-ask-send {
    flex-shrink: 0;
    font: inherit; font-size: .95rem; font-weight: 700;
    color: var(--brand-ink); background: var(--brand-bg);
    border: none; border-radius: 12px;
    padding: .75rem 1rem;
    cursor: pointer;
}
.ig-ask-send:disabled { opacity: .5; cursor: default; }
.ig-ask-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ig-ask-disclaimer { margin: .75rem 0 0; font-size: .75rem; line-height: 1.45; color: #6B7B7D; }
.ig-ask-status { margin: 0 0 .9rem; font-size: .9rem; color: #1C2B2D; }
.ig-ask-status.is-thinking { color: #6B7B7D; animation: igAskPulse 1.4s ease-in-out infinite; }
.ig-ask-status.is-info  { background: #F1ECE4; border-radius: 10px; padding: .6rem .8rem; }
.ig-ask-status.is-error { background: #FBEAEA; color: #8A2B2B; border-radius: 10px; padding: .6rem .8rem; }
@keyframes igAskPulse { 50% { opacity: .45; } }
.ig-ask-progress { height: 6px; margin: -.4rem 0 1rem; border-radius: 99px; background: #E8E1D6; overflow: hidden; }
.ig-ask-progress-fill { width: 0; height: 100%; border-radius: 99px; background: var(--brand-bg); }
html.ig-hc .ig-ask-progress-fill { background: #111 !important; }
.ig-ask-q { font-weight: 700; margin-bottom: .6rem !important; }
.ig-ask-a p { margin-bottom: .75rem; }
.ig-ask-sources { margin: .25rem 0 1rem; }
.ig-ask-sources ul { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.ig-ask-sources a { font-size: .82rem; color: #2A6F6A; word-break: break-word; }
.ig-ask-another {
    width: 100%;
    font: inherit; font-size: .95rem; font-weight: 700;
    color: var(--brand-ink); background: var(--brand-bg);
    border: none; border-radius: 12px;
    padding: .8rem 1rem;
    cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .ig-ask-status.is-thinking { animation: none; } }

/* ── Legpuzzel ── */
.ig-puzzle-wrap {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: .75rem .75rem 0;
}
.ig-puzzle-grid {
    display: grid;
    gap: 3px;
    background: #1C2B2D;
    border: 3px solid #1C2B2D;
    border-radius: 10px;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
.ig-puzzle-piece {
    cursor: pointer;
    transition: opacity .12s;
    -webkit-tap-highlight-color: transparent;
    outline: 0 solid transparent;
}
.ig-puzzle-piece.selected {
    opacity: .65;
    outline: 3px solid rgba(255,255,255,.9);
    outline-offset: -3px;
}
.ig-puzzle-done {
    display: none;
    position: absolute;
    inset: .75rem .75rem 0;
    border-radius: 10px;
    background: rgba(250,248,245,.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
}
.ig-puzzle-done.is-visible {
    display: flex;
    animation: ig-pz-in .4s ease both;
}
@keyframes ig-pz-in {
    from { opacity: 0; transform: scale(.88); }
    to   { opacity: 1; transform: scale(1); }
}
.ig-puzzle-done-inner { text-align: center; padding: 1.5rem 1.25rem; }
.ig-puzzle-done-star {
    font-size: 3.5rem;
    line-height: 1;
    display: block;
    animation: ig-pz-bounce .5s ease .15s both;
}
@keyframes ig-pz-bounce {
    0%   { transform: scale(0) rotate(-15deg); }
    60%  { transform: scale(1.3) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
}
.ig-puzzle-done-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1C2B2D;
    margin: .5rem 0 1.25rem;
    letter-spacing: -.03em;
}
.ig-puzzle-done-next {
    display: inline-block;
    background: var(--brand-bg);
    color: var(--brand-ink);
    padding: .65rem 1.4rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.ig-puzzle-done-next:active { opacity: .8; }

/* ── Quiz ── */
.ig-quiz-question {
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    padding: 1rem 1rem .5rem;
    color: #1C2B2D;
}
.ig-quiz-answers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    padding: .5rem 1rem 1.5rem;
    max-width: 480px;
    margin: 0 auto;
}
.ig-quiz-card {
    background: #fff;
    border: 2px solid #E8E1D6;
    border-radius: 12px;
    padding: .85rem .75rem;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s, background .15s;
    user-select: none;
    min-height: 150px;
    min-width: 150px;
}
.ig-quiz-card:active { opacity: .8; }
.ig-quiz-card.ig-quiz-correct {
    background: #e6f4ea;
    border-color: #34a853;
    color: #1e7e34;
}
.ig-quiz-card.ig-quiz-wrong {
    background: #fdecea;
    border-color: #ea4335;
    color: #c5221f;
}
.ig-quiz-card.ig-quiz-done { pointer-events: none; }

.ig-quiz-done-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.ig-quiz-done-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.ig-quiz-done-sheet {
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 2rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    text-align: center;
    width: 100%;
    max-width: 480px;
}
.ig-quiz-done-sheet { position: relative; }
.ig-game-done-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: #F0ECE6;
    color: #4A5759;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ig-quiz-done-star { margin-bottom: .5rem; }
.ig-quiz-done-star .ig-icon { width: 2.5rem; height: 2.5rem; color: var(--brand-bg); }
.ig-quiz-done-title { font-size: 1.3rem; font-weight: 700; color: #1C2B2D; margin-bottom: 1rem; }
.ig-quiz-done-next {
    display: inline-block;
    margin-top: .25rem;
    background: var(--brand-bg);
    color: var(--brand-ink);
    padding: .65rem 1.4rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.ig-quiz-done-next:active { opacity: .8; }

/* ── Spellen: gedeelde stukken (memory, galgje) ── */
.ig-game-head { padding-bottom: 0; }
.ig-game-intro {
    max-width: 480px;
    margin: 0 auto;
    padding: .75rem 1rem 0;
    text-align: center;
    font-size: .92rem;
    color: #4A5759;
}
.ig-game-done-msg { font-size: .95rem; color: #4A5759; margin: -.5rem 0 1rem; }
.ig-game-done-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    align-items: center;
}
.ig-game-again {
    background: #fff;
    color: #1C2B2D;
    border: 2px solid var(--brand-bg);
    padding: .55rem 1.2rem;
    border-radius: 50px;
    font: inherit;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ig-game-again:active { opacity: .8; }
.ig-game-done-actions .ig-quiz-done-next { margin-top: 0; }

/* ── Memory ── */
.ig-mem-stats {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    padding: .5rem 1rem .25rem;
    font-size: .85rem;
    font-weight: 600;
    color: #4A5759;
    font-variant-numeric: tabular-nums;
}
.ig-mem-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    max-width: 480px;
    margin: 0 auto;
    padding: .5rem 1rem;
    -webkit-user-select: none;
    user-select: none;
}
.ig-mem-card {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    perspective: 600px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.ig-mem-card-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform .35s ease;
}
.ig-mem-card.is-open .ig-mem-card-inner { transform: rotateY(180deg); }
.ig-mem-back,
.ig-mem-front {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.ig-mem-back {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.22) 0 18%, transparent 19%),
        var(--brand-bg);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.18);
}
/* Achterkant = stukje van de omslagfoto van de stop; alle kaarten samen vormen één foto
   (inc/game_memory.inc.php meet het speelveld: --mem-w/--mem-h/--mem-step). */
.ig-mem-grid.has-back-photo .ig-mem-back { background: var(--brand-bg); box-shadow: none; }
.ig-mem-back-photo {
    position: absolute;
    left: calc(var(--c) * var(--mem-step, 0px) * -1);
    top: calc(var(--r) * var(--mem-step, 0px) * -1);
    width: var(--mem-w, 100%);
    height: var(--mem-h, 100%);
    background-image: var(--mem-back);
    background-size: cover;
    background-position: center;
}
.ig-mem-grid.has-back-photo .ig-mem-back::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
    pointer-events: none;
}
.ig-mem-front {
    transform: rotateY(180deg);
    background: #E8E1D6;
}
.ig-mem-front img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ig-mem-card.is-matched .ig-mem-front { box-shadow: 0 0 0 3px #34a853; }
.ig-mem-card.is-matched { cursor: default; }
.ig-mem-card:focus-visible { outline: 3px solid var(--brand-bg); outline-offset: 2px; border-radius: 12px; }
.ig-mem-found {
    min-height: 1.4em;
    margin: .25rem auto 0;
    padding: 0 1rem;
    max-width: 480px;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    color: #1e7e34;
}
@media (prefers-reduced-motion: reduce) {
    .ig-mem-card-inner { transition: none; }
}

/* ── Match, mismatch, orderly: gedeeld ── */
.ig-game-feedback {
    min-height: 1.4em;
    margin: .25rem auto 0;
    padding: 0 1rem;
    max-width: 480px;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    color: #1e7e34;
}
.ig-game-next-wrap { text-align: center; padding: .5rem 1rem .75rem; }
.ig-game-next { border: 0; font-family: inherit; cursor: pointer; }
@keyframes ig-game-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ── Match: twee kolommen foto's, lijn tussen elk gevonden paar ── */
.ig-match-board {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 14vw, 5rem);
    max-width: 420px;
    margin: 0 auto;
    padding: .5rem 1rem 1rem;
    -webkit-user-select: none;
    user-select: none;
}
.ig-match-board[data-n="4"],
.ig-match-board[data-n="5"] { max-width: 340px; } /* vier of vijf rijen: kleinere foto's, het bord blijft overzichtelijk */
.ig-match-col { display: flex; flex-direction: column; gap: .6rem; }
.ig-match-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
.ig-match-lines line { stroke: var(--brand-bg); stroke-width: 3; stroke-linecap: round; }
.ig-match-tile {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #E8E1D6;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    transition: box-shadow .15s, transform .15s, opacity .2s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.ig-match-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ig-match-tile.is-selected { box-shadow: 0 0 0 3px var(--brand-bg); transform: scale(1.04); }
.ig-match-tile.is-matched { box-shadow: 0 0 0 3px #34a853; cursor: default; }
.ig-match-tile.is-wrong { animation: ig-game-shake .45s; box-shadow: 0 0 0 3px #ea4335; }
.ig-match-tile:focus-visible { outline: 3px solid var(--brand-bg); outline-offset: 2px; }

/* ── Mismatch: raster per ronde, de foto die er niet bij hoort ── */
.ig-odd-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    max-width: 420px;
    margin: 0 auto;
    padding: .5rem 1rem;
    -webkit-user-select: none;
    user-select: none;
}
.ig-odd-grid[data-n="3"],
.ig-odd-grid[data-n="5"],
.ig-odd-grid[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ig-odd-tile {
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #E8E1D6;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    transition: box-shadow .15s, opacity .25s, transform .2s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.ig-odd-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ig-odd-tile.is-correct { box-shadow: 0 0 0 4px #34a853; transform: scale(1.04); }
.ig-odd-tile.is-faded { opacity: .45; }
.ig-odd-tile.is-wrong { animation: ig-game-shake .45s; opacity: .35; box-shadow: 0 0 0 3px #ea4335; cursor: default; }
.ig-odd-tile:focus-visible { outline: 3px solid var(--brand-bg); outline-offset: 2px; }

/* ── Orderly: lijst van oud (boven) naar nieuw (onder), slepen of tik-tik wisselen ── */
.ig-ord-wrap { max-width: 480px; margin: 0 auto; padding: .25rem 1rem; }
/* Controleer-knop boven de lijst, met het aantal controles als badge (wit rondje, merkkleur cijfer) */
.ig-ord-bar { text-align: center; padding: .6rem 1rem 0; }
.ig-ord-check { display: inline-flex; align-items: center; gap: .55rem; margin-top: 0; }
.ig-ord-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    height: 1.6em;
    padding: 0 .4em;
    border-radius: 50px;
    background: var(--brand-ink);
    color: var(--brand-bg);
    font-size: .85rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.ig-ord-bar .ig-game-feedback { margin-top: .4rem; }
.ig-ord-end {
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #4A5759;
    padding: .25rem 0;
}
.ig-ord-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.ig-ord-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem .6rem .4rem .4rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .15s, background .2s;
}
.ig-ord-item img { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 8px; object-fit: cover; pointer-events: none; }
.ig-ord-name { flex: 1; min-width: 0; font-size: .92rem; font-weight: 600; color: #1C2B2D; line-height: 1.3; }
.ig-ord-year { display: none; font-size: .9rem; font-weight: 700; color: #1e7e34; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ig-ord-grip { color: #9AA3A5; font-size: 1rem; letter-spacing: -.15em; padding: 0 .1rem; }
.ig-ord-item.is-selected { box-shadow: 0 0 0 3px var(--brand-bg); }
.ig-ord-item.is-dragging { z-index: 2; cursor: grabbing; box-shadow: 0 8px 24px rgba(0,0,0,.22); transition: none; }
.ig-ord-item.is-locked { cursor: default; background: #EAF6EC; box-shadow: 0 0 0 2px #34a853; }
.ig-ord-item.is-locked .ig-ord-year { display: inline; }
.ig-ord-item.is-locked .ig-ord-grip { visibility: hidden; }
.ig-ord-item.is-wrong { animation: ig-game-shake .45s; box-shadow: 0 0 0 2px #ea4335; }
.ig-ord-item:focus-visible { outline: 3px solid var(--brand-bg); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .ig-match-tile.is-wrong, .ig-odd-tile.is-wrong, .ig-ord-item.is-wrong { animation: none; }
}

/* ── Galgje: foto verdwijnt per foute letter, toetsenbord op de plek van de tekst ── */
.ig-hm-photo {
    position: relative;
    container-type: inline-size; /* de letters in de badge schalen mee met de fotobreedte */
    width: 100%;
    aspect-ratio: 3/2;
    overflow: hidden;
    background: var(--brand-bg-a22);
}
.ig-hm-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-hm-img--none { background: var(--brand-bg); opacity: .35; }
.ig-hm-tiles {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--hm-cols, 4), 1fr);
    grid-template-rows: repeat(var(--hm-rows, 2), 1fr);
    pointer-events: none;
}
.ig-hm-tile {
    background: linear-gradient(var(--brand-bg-a22), var(--brand-bg-a22)), #F3EFE9;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .45s ease, transform .45s ease;
}
.ig-hm-tile.is-gone { opacity: 1; transform: scale(1.02); }
.ig-hm-badge {
    position: absolute;
    left: 50%;
    bottom: .75rem;
    transform: translateX(-50%);
    z-index: 2;
    width: 90vw;
    max-width: calc(100% - 1rem); /* landscape/split: foto smaller dan het scherm */
    padding: .5rem .75rem .4rem;
    border-radius: 14px;
    background: var(--brand-bg);
    color: var(--brand-ink);
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.ig-hm-word {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem .7rem;
}
.ig-hm-part { display: inline-flex; gap: .15rem; }
/* 14 letters (het maximum per woord) passen altijd: breedte ≈ 4,6% van de foto, max 1,15rem */
.ig-hm-letter {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    width: 1.15rem;
    width: clamp(.6rem, 4.6cqi, 1.15rem);
    height: 1.6rem;
    height: clamp(.9rem, 6.4cqi, 1.6rem);
    border-bottom: 2px solid currentColor;
    font-size: 1.05rem;
    font-size: clamp(.65rem, 4.2cqi, 1.05rem);
    font-weight: 800;
    line-height: 1;
    padding-bottom: .12rem;
    color: inherit;
}
.ig-hm-letter.is-free { border-bottom-color: transparent; width: auto; min-width: .4rem; }
.ig-hm-letter.is-shown { animation: ig-hm-pop .25s ease; }
.ig-hm-letter.is-missed { opacity: .65; border-bottom-style: dashed; }
@keyframes ig-hm-pop {
    from { transform: translateY(4px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.ig-hm-status {
    margin-top: .3rem;
    text-align: center;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .02em;
    opacity: .85;
}
.ig-hm .ig-poi-body .ig-hm-keyboard { margin-top: 1rem; }
.ig-hm-keyboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    max-width: 480px;
    margin: 0 auto;
}
.ig-hm-key {
    flex: 0 0 calc((100% - 6 * .35rem) / 7);
    max-width: 3rem;
    height: 2.75rem;
    border: 2px solid #E8E1D6;
    border-radius: 10px;
    background: #fff;
    color: #1C2B2D;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background .15s, border-color .15s, opacity .15s;
}
.ig-hm-key:active { opacity: .7; }
.ig-hm-key:disabled { cursor: default; }
.ig-hm-key.is-hit  { background: #e6f4ea; border-color: #34a853; color: #1e7e34; }
.ig-hm-key.is-miss { background: #F3EFE9; border-color: #E8E1D6; color: #B3ADA4; }
.ig-hm-result { text-align: center; margin-top: .5rem; }
.ig-hm-result-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .5rem; }
.ig-hm-result-title.is-won  { color: #1e7e34; }
.ig-hm-result-title.is-lost { color: #c5221f; }
.ig-hm-result-expl {
    background: var(--brand-bg-a14);
    border-radius: 12px;
    padding: .75rem 1rem;
    font-size: .95rem;
    line-height: 1.55;
    color: #1C2B2D;
    margin: 0 auto 1rem;
    max-width: 480px;
    text-align: left;
}
@media (prefers-reduced-motion: reduce) {
    .ig-hm-tile, .ig-hm-letter.is-shown { transition: none; animation: none; }
}

/* ── Trofeeënbalk ──
   Eén trofee per spel in de tour. Staat alleen nog in het "Goed gedaan"-venster na een spel
   (.ig-done-trophies) en uitgezoomd vanaf het trofee-knopje op de tourkaart (.ig-tour-trophy-pop). */
.ig-trophy-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .5rem .75rem;
    background: color-mix(in srgb, var(--brand-bg) 10%, #fff);
    border-radius: 100px;
}
.ig-trophy-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
    transition: transform .15s;
}
.ig-trophy-item:active { transform: scale(.92); }
.ig-trophy-icon { display: block; width: 22px; height: 22px; color: var(--brand-bg); opacity: .3; transition: opacity .2s; }
.ig-trophy-item.ig-trophy-done .ig-trophy-icon { opacity: 1; }
html.ig-hc .ig-trophy-pill { background: #111 !important; border: 1px solid #fff; }
html.ig-hc .ig-trophy-item { background: #000 !important; border: 1px solid #fff; }
html.ig-hc .ig-trophy-icon { color: #fff !important; opacity: .4; }
html.ig-hc .ig-trophy-item.ig-trophy-done .ig-trophy-icon { opacity: 1; }

/* Net verdiend: de trofee springt erin */
.ig-trophy-item.ig-trophy-new .ig-trophy-icon { animation: ig-trophy-pop .6s ease .35s both; }
@keyframes ig-trophy-pop {
    0%   { transform: scale(.4) rotate(-15deg); opacity: .3; }
    60%  { transform: scale(1.35) rotate(6deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* In het "Goed gedaan"-venster (quiz, puzzel en de spellen in inc/game_*.inc.php) */
.ig-done-trophies { margin: 0 auto 1.1rem; max-width: 420px; text-align: center; }
.ig-done-trophies .ig-trophy-pill { display: inline-flex; max-width: 100%; }
.ig-done-trophies .ig-trophy-item { width: 36px; height: 36px; }
.ig-done-trophies .ig-trophy-icon { width: 20px; height: 20px; }
.ig-hm-result .ig-done-trophies { margin-top: .75rem; }

/* Trofee-popup ligt boven het "Goed gedaan"-venster en de uitgezoomde balk */
#ig-trophy-modal { z-index: 260; }

/* Tourkaart: klein trofee-knopje dat uitzoomt naar de volledige balk (tours.php) */
.ig-tour-card { position: relative; }
.ig-tour-trophy {
    position: absolute;
    z-index: 2;
    top: calc(180px - 32px - .65rem);   /* Classic: rechtsonder op de foto */
    right: .65rem;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--brand-bg);
    color: var(--brand-ink);
    box-shadow: 0 1px 4px rgba(0,0,0,.22);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s, opacity .2s;
}
.ig-tour-trophy .ig-icon { width: 17px; height: 17px; }
.ig-tour-trophy:active { transform: scale(.92); }
.ig-tour-trophy.is-open { opacity: 0; transform: scale(.6); }
/* Foto-banner en Raster: naast het (i)-knopje rechtsboven */
.ig-tours--banner .ig-tour-trophy { top: .6rem; right: calc(.6rem + 32px + .4rem); }
.ig-tours--grid .ig-tour-trophy { top: .45rem; right: calc(.45rem + 30px + .35rem); width: 30px; height: 30px; }
.ig-tours--grid .ig-tour-trophy .ig-icon { width: 16px; height: 16px; }

.ig-tour-trophy-pop {
    position: fixed;
    z-index: 150;
    max-width: calc(100vw - 32px);
    padding: .25rem;
    background: #fff;
    border-radius: 100px;
    box-shadow: 0 8px 28px rgba(0,0,0,.22);
    opacity: 0;
    transform: scale(.08);
    transition: transform .32s cubic-bezier(.2, .9, .3, 1.15), opacity .2s;
}
.ig-tour-trophy-pop.is-open { opacity: 1; transform: scale(1); }
/* Onzichtbare laag onder de uitgezoomde balk: tik ernaast = alleen sluiten, geen tour openen */
.ig-tour-trophy-shield { position: fixed; inset: 0; z-index: 149; background: transparent; }
html.ig-hc .ig-tour-trophy { background: #000 !important; color: #fff !important; border: 1px solid #fff; }
html.ig-hc .ig-tour-trophy-pop { background: #000 !important; border: 1px solid #fff; }
@media (prefers-reduced-motion: reduce) {
    .ig-tour-trophy-pop, .ig-tour-trophy { transition: opacity .15s; }
    .ig-tour-trophy-pop { transform: none; }
    .ig-trophy-item.ig-trophy-new .ig-trophy-icon { animation: none; }
}

/* POI nav */
.ig-poi-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--brand-bg);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: .625rem .875rem;
    padding-bottom: calc(.625rem + env(safe-area-inset-bottom));
    z-index: 90;
}

.ig-poi-nav a,
.ig-poi-nav span {
    display: flex;
    align-items: center;
    color: var(--brand-ink);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
    min-height: 44px;
}

.ig-poi-nav-prev { justify-content: flex-start; }
.ig-poi-nav-next { justify-content: flex-end; }

.ig-poi-nav-all {
    justify-content: center;
    padding: .5rem .875rem;
    border-radius: 8px;
    border: 1.5px solid var(--brand-ink-a33);
}

.ig-poi-nav .disabled { opacity: .3; }

/* ── Terug-naar-scanner FAB (alleen bij QR-binnenkomst) ── */
.ig-scan-return-fab {
    position: fixed;
    right: 1rem;
    bottom: calc(74px + env(safe-area-inset-bottom));
    z-index: 91;
    display: flex;
    align-items: center;
    gap: .45rem;
    background: var(--brand-bg);
    color: var(--brand-ink);
    border: none;
    border-radius: 999px;
    padding: .6rem 1rem .6rem .7rem;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.ig-scan-return-fab .ig-icon { width: 18px; height: 18px; }
/* Verkleinde audiospeler: rechtsonder ligt de knoppenrij (pil met fullscreen-knop), dus de
   scanknop staat daar rechtsboven op de afbeelding, net onder de topbar (56px + safe area) */
body:not(.ig-ap-fs):has(#ig-ap) .ig-scan-return-fab {
    top: calc(56px + env(safe-area-inset-top) + .75rem);
    bottom: auto;
}

/* Hoog contrast modus */
html.ig-hc body { background: #000 !important; color: #fff !important; }
html.ig-hc .ig-poi-card { background: #111 !important; border-color: #fff !important; }
html.ig-hc .ig-poi-card-thumb { background: #111 !important; }
html.ig-hc .ig-poi-card-title { color: #fff !important; }
html.ig-hc .ig-poi-item { background: #111 !important; border-color: #fff !important; }
html.ig-hc .ig-poi-name { color: #fff !important; }
html.ig-hc .ig-poi-arrow { color: #888 !important; }
html.ig-hc .ig-poi-title { color: #fff !important; }
html.ig-hc .ig-poi-text { color: #eee !important; }
html.ig-hc .ig-poi-text p,
html.ig-hc .ig-poi-text li { color: #eee !important; }
html.ig-hc .ig-poi-nav {
    background: #000 !important;
    border-top: 2px solid #fff;
}
html.ig-hc .ig-poi-nav a,
html.ig-hc .ig-poi-nav span { color: #fff !important; }
html.ig-hc .ig-poi-nav-all { border-color: #fff !important; }
html.ig-hc .ig-view-toggle { background: #222 !important; }
html.ig-hc .ig-view-btn { color: #ccc !important; }
html.ig-hc .ig-view-btn.active { background: #fff !important; color: #000 !important; }
html.ig-hc .ig-search-wrap { background: #111 !important; border-color: #fff !important; }
html.ig-hc .ig-view-tourbadge { background: #fff !important; color: #000 !important; }
html.ig-hc .ig-scan-frame { border-color: #FFFF00 !important; }
html.ig-hc .ig-scan-frame.is-hit { border-color: #4CAF6A !important; }
html.ig-hc .ig-scan-line { background: #FFFF00 !important; box-shadow: 0 0 8px #FFFF00 !important; }
html.ig-hc .ig-scan-banner { background: rgba(0,0,0,.9) !important; color: #fff !important; }
html.ig-hc .ig-scan-return-fab { background: #fff !important; color: #000 !important; border: 2px solid #fff !important; }

/* ── GPS: constante indicator (geen tab) ── */
.ig-gps-indicator {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: .5rem;
    padding: .35rem .65rem;
    border: 1px solid #E8E1D6;
    border-radius: 99px;
    background: #fff;
    font-size: .75rem;
    font-weight: 600;
    color: #4A5B5D;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.ig-gps-indicator-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #C8BEB4;
    flex-shrink: 0;
}
.ig-gps-indicator[data-state="active"] {
    border-color: var(--brand-bg);
    color: var(--brand-bg);
    cursor: default;
}
.ig-gps-indicator[data-state="active"] .ig-gps-indicator-dot {
    background: var(--brand-bg);
    animation: ig-gps-pulse-anim 1.8s ease-out infinite;
}
.ig-gps-indicator[data-state="denied"] {
    color: #A33;
    border-color: #E8C4C0;
    cursor: default;
}
.ig-gps-indicator[data-state="denied"] .ig-gps-indicator-dot { background: #C0392B; }
@keyframes ig-gps-pulse-anim {
    0%   { box-shadow: 0 0 0 0 var(--brand-bg-a55); }
    100% { box-shadow: 0 0 0 6px var(--brand-bg-a00); }
}
@media (prefers-reduced-motion: reduce) {
    .ig-gps-indicator[data-state="active"] .ig-gps-indicator-dot { animation: none; }
}

.ig-gps-optin-banner {
    display: none;
    align-items: center;
    gap: .6rem;
    margin: 0 1rem .75rem;
    padding: .7rem .9rem;
    background: #FFF3CD;
    border: 1px solid #F0C040;
    border-radius: 10px;
    color: #7A5000;
    font-size: .825rem;
    line-height: 1.4;
}
.ig-gps-optin-banner.is-visible { display: flex; }
.ig-gps-optin-banner .ig-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Zone-highlight — the POI's own card/item lights up when it comes into
   GPS range, in both the grid and the list view, instead of a separate
   floating banner. The card/item is already the link into the POI. */
.ig-gps-near-badge {
    display: none;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 700;
}
.ig-gps-near-badge .ig-icon { width: 13px; height: 13px; }

/* Grid card: badge overlaid on the thumbnail, card gets a glowing ring */
.ig-poi-card-thumb .ig-gps-near-badge {
    position: absolute;
    top: .5rem; left: .5rem;
    z-index: 2;
    padding: .3rem .55rem;
    border-radius: 99px;
    background: var(--brand-bg);
    color: var(--brand-ink);
}
.ig-poi-card.is-gps-near {
    box-shadow: 0 0 0 3px var(--brand-bg);
    animation: ig-gps-near-pulse 1.8s ease-in-out infinite;
}
@keyframes ig-gps-near-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--brand-bg); }
    50%      { box-shadow: 0 0 0 3px var(--brand-bg-a99); }
}

/* List item: inline pill next to the name, item gets a tinted background */
.ig-gps-near-badge--item {
    padding: .2rem .5rem;
    border-radius: 99px;
    background: var(--brand-bg);
    color: var(--brand-ink);
    flex-shrink: 0;
}
.ig-poi-item.is-gps-near {
    background: var(--brand-bg-a14);
    border-color: var(--brand-bg);
}

.ig-poi-card.is-gps-near .ig-gps-near-badge,
.ig-poi-item.is-gps-near .ig-gps-near-badge { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
    .ig-poi-card.is-gps-near { animation: none; }
}

/* Background-pause toast (Page Visibility) */
.ig-gps-toast {
    position: fixed;
    left: 1rem; right: 1rem; top: calc(env(safe-area-inset-top, 0px) + 3.75rem);
    z-index: 7500;
    display: none;
    padding: .7rem .9rem;
    background: rgba(0,0,0,.85);
    color: #fff;
    border-radius: 10px;
    font-size: .8rem;
    text-align: center;
}
.ig-gps-toast.is-visible { display: block; }

/* Geblurred "Resume"-scherm: gate vóór (her)start van GPS-tracking */
.ig-gps-resume-gate {
    position: fixed;
    inset: 0;
    z-index: 8500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(28,43,45,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.ig-gps-resume-gate[hidden] { display: none; }
.ig-gps-resume-card {
    max-width: 20rem;
    width: 100%;
    background: var(--bg);
    border-radius: var(--radius, 12px);
    padding: 1.5rem 1.25rem;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.ig-gps-resume-card svg { width: 2rem; height: 2rem; color: var(--teal); margin-bottom: .6rem; }
.ig-gps-resume-card p { margin: 0 0 1rem; color: var(--ink); font-size: .9rem; line-height: 1.4; }
.ig-gps-resume-card button {
    border: 0;
    background: var(--teal);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    padding: .65rem 1.5rem;
    border-radius: 999px;
    cursor: pointer;
}
.ig-gps-resume-card button:active { background: var(--teal-deep); }

/* Tijdelijk diagnostisch paneel (?gpsdebug=1) */
.ig-gps-debug {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 40vh;
    overflow-y: auto;
    margin: 0;
    padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom, 0px));
    background: rgba(0,0,0,.9);
    color: #7CFC7C;
    font: 11px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
    white-space: pre-wrap;
    word-break: break-word;
    z-index: 99999;
    border-top: 2px solid #7CFC7C;
}
.ig-gps-debug[hidden] { display: none; }

html.ig-hc .ig-gps-indicator { background: #111 !important; border-color: #fff !important; color: #fff !important; }
html.ig-hc .ig-gps-near-badge { background: #FFFF00 !important; color: #000 !important; }
html.ig-hc .ig-poi-card.is-gps-near { box-shadow: 0 0 0 3px #FFFF00 !important; }
html.ig-hc .ig-poi-item.is-gps-near { background: #222 !important; border-color: #FFFF00 !important; }
html.ig-hc .ig-gps-optin-banner { background: #222 !important; color: #fff !important; border-color: #fff !important; }
html.ig-hc #ig-search { color: #fff !important; }
html.ig-hc #ig-search::placeholder { color: #888 !important; }
html.ig-hc #ig-search-clear { color: #ccc !important; }
html.ig-hc .ig-sheet { background: #111 !important; }
html.ig-hc .ig-sheet-title { color: #fff !important; }
html.ig-hc .ig-sheet-body { color: #eee !important; }
html.ig-hc .ig-sheet-body p,
html.ig-hc .ig-sheet-body li { color: #eee !important; }
html.ig-hc .ig-sheet-close { background: #333 !important; color: #fff !important; }
html.ig-hc .ig-sheet-header { border-color: #444 !important; }
html.ig-hc *:focus-visible { outline: 3px solid #FFFF00 !important; outline-offset: 2px !important; }

/* ── Videospeler ── */
.ig-vp-wrap { padding-bottom: 5rem; }

/* Sticky video blok (portrait) */
.ig-vp-sticky {
    position: sticky;
    top: 56px;
    z-index: 10;
    background: #000;
}
.ig-vp-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}
.ig-vp-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Controls overlay op de video */
.ig-vp-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 1;
    transition: opacity .3s;
}
.ig-vp-overlay.ig-vp-hidden { opacity: 0; pointer-events: none; }
.ig-vp-overlay-top {
    padding: .5rem .625rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.ig-vp-overlay-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex: 1;
}
.ig-vp-overlay-bottom {
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 100%);
    padding: .5rem .875rem calc(.5rem + env(safe-area-inset-bottom));
}
.ig-vp-play {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,.88);
    background: rgba(0,0,0,.38);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .1s;
}
.ig-vp-play:active { transform: scale(.88); }

/* Minimize — alleen zichtbaar in forced fullscreen (.ig-vp-fs op body) */
.ig-vp-minimize {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .1s;
    flex-shrink: 0;
}
.ig-vp-minimize:active { transform: scale(.88); }
body.ig-vp-fs .ig-vp-minimize { display: flex; }

/* "Rotate for fullscreen"-hint: landscape video, scherm nog in portrait. Sits in normal
   flow right below the play button (inside .ig-vp-overlay-center) instead of being
   pinned a fixed distance from the container bottom — the old bottom-anchored offset
   was tuned for one specific layout and drifted out of place under PWA safe-area
   insets / whenever the thumbnail strip changed height, causing it to overlap. Being a
   flex sibling of the play button keeps it correctly placed regardless of what's above
   or below it. */
.ig-vp-rotate-hint {
    align-items: center;
    gap: .4rem;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    padding: .45rem .8rem;
    border-radius: 999px;
    white-space: nowrap;
    opacity: 1;
    transition: opacity .3s;
    pointer-events: none;
}
/* [hidden] moet display:none kunnen winnen — display niet los op de basisklasse zetten */
.ig-vp-rotate-hint:not([hidden]) { display: flex; }
.ig-vp-rotate-hint.ig-vp-hidden { opacity: 0; }

/* Progress + skip (hergebruik audio-stijlen) */
.ig-vp-progress {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .35rem;
}
.ig-vp-time {
    color: rgba(255,255,255,.82);
    font-size: .72rem;
    font-weight: 500;
    min-width: 30px;
    font-variant-numeric: tabular-nums;
}
.ig-vp-time:last-child { text-align: right; }
.ig-vp-bar {
    flex: 1; height: 32px;
    display: flex; align-items: center;
    cursor: pointer; position: relative;
}
.ig-vp-bar-track {
    position: absolute; left: 0; right: 0;
    height: 3px; background: rgba(255,255,255,.28); border-radius: 2px;
}
.ig-vp-bar-fill {
    position: absolute; left: 0;
    height: 3px; width: 0%;
    background: #fff; border-radius: 2px; pointer-events: none;
}
.ig-vp-bar-thumb {
    position: absolute;
    width: 12px; height: 12px;
    border-radius: 50%; background: #fff;
    transform: translateX(-50%); left: 0%;
    pointer-events: none; box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.ig-vp-skip-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
.ig-vp-skip-row-left {
    justify-self: start;
}
.ig-vp-skip-row-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
.ig-vp-skip {
    position: relative;
    width: 42px; height: 42px;
    border: none; background: none;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: .88; transition: opacity .15s, transform .1s;
}
.ig-vp-skip:active { transform: scale(.86); opacity: 1; }
.ig-vp-skip-num {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .5rem; font-weight: 900; color: #fff;
    margin-top: 6px; pointer-events: none;
}

/* Playlist (portrait, onder video) */
.ig-vp-body {
    padding: 1.25rem 1.25rem .75rem;
    max-width: 600px;
    margin: 0 auto;
}
.ig-vp-playlist {
    padding: 0 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    max-width: 600px;
    margin: 0 auto;
}
.ig-vp-track {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: rgba(28,43,45,.06);
    border: 1.5px solid #E8E1D6;
    border-radius: 12px;
    padding: .5rem .9rem .5rem .5rem;
    color: #1C2B2D;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    width: 100%;
    text-align: left;
}
.ig-vp-track.active {
    background: var(--brand-bg-a18);
    border-color: var(--brand-bg);
}
.ig-vp-track-poster {
    width: 72px;
    aspect-ratio: 16/9;
    border-radius: 7px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--brand-bg-a22);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ig-vp-track-poster img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.ig-vp-track-poster-icon { color: var(--brand-bg); opacity: .6; }
.ig-vp-track-info { flex: 1; min-width: 0; }
.ig-vp-track-title {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ig-vp-track-active-label {
    font-size: .72rem;
    color: var(--brand-bg);
    font-weight: 600;
    margin-top: .15rem;
    display: none;
}
.ig-vp-track.active .ig-vp-track-active-label { display: block; }

/* Fullscreen playlist thumbnails — lives inside .ig-vp-overlay-bottom, right above the
   progress bar. Portrait (default): horizontal strip in normal flow, just above the
   progress bar. Landscape: detached into a vertical column pinned to the right edge
   (positioned against .ig-vp-container, the nearest positioned ancestor). */
.ig-vp-sidebar {
    display: none;
    flex-direction: row;
    gap: 6px;
    padding: 0;
    margin-bottom: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    opacity: 1;
    transition: opacity .3s;
}
.ig-vp-sidebar.ig-vp-hidden { opacity: 0; pointer-events: none; }
.ig-vp-sidebar-item {
    position: relative;
    width: 84px;
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: rgba(255,255,255,.18);
    flex-shrink: 0;
    transition: border-color .18s;
}
.ig-vp-sidebar-item.active { border-color: rgba(255,255,255,.85); }
.ig-vp-sidebar-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-vp-sidebar-no-poster {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.5);
}
.ig-vp-sidebar-num {
    position: absolute; bottom: 2px; right: 4px;
    color: #fff; font-size: .58rem; font-weight: 700;
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
@media (orientation: landscape) {
    body.ig-vp-fs .ig-vp-sidebar {
        position: absolute;
        left: auto; right: 0; top: 0; bottom: 60px;
        width: 108px;
        flex-direction: column;
        gap: 6px;
        padding: 8px;
        margin-bottom: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
    body.ig-vp-fs .ig-vp-sidebar-item { width: 100%; }
}

/* Fullscreen — JS-driven (.ig-vp-fs op body): alleen zodra het toestel naar landscape
   draait; terug naar portrait (of Minimize) zet de speler weer inline op zijn startplek.
   In portrait speelt de video inline af zodat de tekst eronder zichtbaar blijft; een
   landscape-video toont daar de .ig-vp-rotate-hint. */
body.ig-vp-fs .ig-vp-sticky {
    position: fixed;
    inset: 0;
    top: 0;
    z-index: 200;
    aspect-ratio: unset;
}
body.ig-vp-fs .ig-vp-container {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
}
body.ig-vp-fs .ig-vp-body,
body.ig-vp-fs .ig-vp-playlist { display: none; }
body.ig-vp-fs .ig-vp-sidebar { display: flex; }
body.ig-vp-fs .ig-vp-overlay-bottom {
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
}
/* Nav verbergen in fullscreen */
body.ig-vp-fs .ig-poi-nav { display: none; }
body.ig-vp-fs .ig-scan-return-fab { display: none; }

/* === survey modal (inc/survey_modal.inc.php) === */
/* Alleen geïncludeerd via inc/topbar.inc.php, dat op zijn beurt alleen in
   tours.php/poi.php geladen wordt — --brand-bg/--brand-ink staan dus al. */
.ig-survey-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 400;
}
.ig-survey-overlay.active { display: block; }
.ig-survey-modal {
    display: none; position: fixed; z-index: 410; left: 0; right: 0; bottom: 0;
    max-height: 88vh; overflow-y: auto; background: #fff; color: #1a1a1a;
    border-radius: 16px 16px 0 0; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    flex-direction: column; gap: 1rem;
}
@media (min-width: 640px) {
    .ig-survey-modal {
        left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%);
        width: 100%; max-width: 480px; border-radius: 16px;
    }
}
.ig-survey-modal.active { display: flex; }
.ig-survey-modal h2 { margin: 0; font-size: 1.05rem; }
.ig-survey-q { display: flex; flex-direction: column; gap: .5rem; }
.ig-survey-q-text { font-size: .92rem; font-weight: 500; }
.ig-survey-stars { display: flex; gap: .35rem; }
.ig-survey-star {
    background: none; border: none; padding: 0; cursor: pointer; line-height: 1;
    font-size: 1.9rem; color: #D8D4CE;
}
.ig-survey-star.filled { color: var(--brand-bg); }
.ig-survey-open textarea {
    width: 100%; box-sizing: border-box; min-height: 5rem; border-radius: 10px;
    border: 1px solid #D8D4CE; padding: .6rem .75rem; font: inherit; resize: vertical;
}
.ig-survey-submit {
    border: none; border-radius: 100px; padding: .75rem 1rem; font-weight: 700;
    font-size: .95rem; cursor: pointer;
    background: var(--brand-bg); color: var(--brand-ink);
}
.ig-survey-submit:disabled { opacity: .5; cursor: default; }
.ig-survey-close {
    align-self: flex-end; background: none; border: none; font-size: 1.4rem;
    line-height: 1; cursor: pointer; color: #8a8580; padding: .25rem;
}
.ig-survey-thanks { text-align: center; padding: 1rem 0; }
.ig-survey-reward-code {
    font-size: 1.6rem; font-weight: 800; letter-spacing: .08em; margin: .75rem 0;
    background: #F7F5F2; border-radius: 10px; padding: .75rem; color: #1a1a1a;
}

/* ── Tour-splash (inc/tour_splash.inc.php) ───────────────────────────────────
   Rustig titelscherm bij het openen van een tour (2026-11-12): witte achtergrond, de liggende
   tourfoto in de bovenhelft, daaronder titel en tagline. Geen zoom of schuivende tekst; alleen
   de splash als geheel fadet in en uit (--ts-fade uit de tourinstellingen). */
.ig-tour-splash {
    position: fixed;
    inset: 0;
    min-height: 100vh;
    z-index: 9500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Bovenmarge zo dat de foto ongeveer in het midden van de bovenste helft staat. */
    padding: calc(14vh + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    /* Gloed rechtsonder in de museumkleur met het meeste contrast (--brand-accent), zelfde
       opbouw als de radiale gloed op de inlogschermen. */
    background:
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--brand-accent, var(--brand-bg, #3D6B5C)) 45%, transparent) 0, transparent 60%),
        var(--bg, #FAF8F5);
    color: var(--ink, #1C2B2D);
    text-align: center;
    opacity: 0;
    transition: opacity var(--ts-fade, .6s) ease;
}
.ig-tour-splash.is-in    { opacity: 1; }
.ig-tour-splash.no-fade  { transition: none; }
/* Zonder foto: titel en tagline in het midden. */
.ig-tour-splash.no-photo { justify-content: center; padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
/* poi.php: absolute + volle schermhoogte i.p.v. fixed — zie inc/tour_splash.inc.php (iOS-strook). */
.ig-tour-splash.in-doc {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: auto;
    height: 100vh;
    height: 100lvh;
}
/* Zie inc/tour_splash.inc.php: strook onderin de iOS-PWA krijgt de html-achtergrond. */
html.ig-splash-on { background: var(--bg, #FAF8F5); }
.ig-tour-splash-img {
    display: block;
    width: 100%;
    max-width: 34rem;
    max-height: 38vh;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 3px 6px rgba(28, 43, 45, .18), 0 10px 22px rgba(28, 43, 45, .22);
}
.ig-tour-splash-text {
    max-width: 34rem;
    margin-top: 28px;
}
.ig-tour-splash-text h1 {
    margin: 0;
    font-size: clamp(1.8rem, 8vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.ig-tour-splash-text p {
    margin: .75rem 0 0;
    font-size: clamp(1rem, 4.4vw, 1.2rem);
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink-soft, #4A5B5D);
}

/* ── Ideeënbus: schermvullend vel dat van onderen inschuift (inc/suggestion_modal.inc.php) ── */
.ig-suggest {
    position: fixed; inset: 0; z-index: 7000;
    background: #fff; color: #1a1a1a;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateY(100%); visibility: hidden;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .32s;
}
.ig-suggest.open {
    transform: none; visibility: visible;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
html.ig-suggest-lock, html.ig-suggest-lock body { overflow: hidden; }
.ig-suggest-inner {
    position: relative; max-width: 560px; margin: 0 auto; min-height: 100%;
    display: flex; flex-direction: column; gap: 1rem; box-sizing: border-box;
    padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
}
.ig-suggest-close {
    position: absolute; top: calc(.75rem + env(safe-area-inset-top, 0px)); right: 1rem;
    width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: #F2EFEB; color: #1a1a1a;
}
.ig-suggest-logo {
    display: flex; justify-content: center; align-items: center;
    min-height: 72px; padding: 1.5rem 3rem .25rem;
}
.ig-suggest-logo img { max-height: 72px; max-width: 220px; width: auto; object-fit: contain; display: block; }
.ig-suggest-logo-name { font-size: 1.15rem; font-weight: 700; text-align: center; }
.ig-suggest-title { margin: 0; text-align: center; font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.ig-suggest-form { display: flex; flex-direction: column; gap: .9rem; flex: 1; }
.ig-suggest-select,
.ig-suggest-text {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: #1a1a1a;
    background: #fff; border: 1px solid #D8D4CE; border-radius: 10px; padding: .75rem .85rem;
}
.ig-suggest-select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8580' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center;
}
.ig-suggest-select:invalid { color: #8a8580; }
.ig-suggest-text { min-height: 10rem; flex: 1; resize: vertical; }
.ig-suggest-select:focus, .ig-suggest-text:focus { outline: 2px solid var(--brand-bg); outline-offset: 1px; }
.ig-suggest-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; line-height: 1.4; cursor: pointer; }
.ig-suggest-check input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--brand-bg); }
.ig-suggest-error { margin: 0; font-size: .88rem; color: #B42318; }
.ig-suggest-submit {
    border: none; border-radius: 100px; padding: .85rem 1rem; font: inherit; font-weight: 700;
    font-size: 1rem; cursor: pointer; width: 100%;
    background: var(--brand-bg); color: var(--brand-ink);
}
.ig-suggest-submit:disabled { opacity: .45; cursor: default; }
.ig-suggest-sent { text-align: center; display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1rem; }
.ig-suggest-sent p { margin: 0; font-size: 1rem; }
/* Toetsenbord open: vel volgt het zichtbare deel (JS zet top/height), opmaak compacter. */
.ig-suggest.kb-open .ig-suggest-inner { min-height: 100%; gap: .6rem; padding-top: calc(.6rem + env(safe-area-inset-top, 0px)); padding-bottom: .75rem; }
.ig-suggest.kb-open .ig-suggest-logo { min-height: 0; padding: .25rem 3rem 0; }
.ig-suggest.kb-open .ig-suggest-logo img { max-height: 40px; }
.ig-suggest.kb-open .ig-suggest-title { font-size: 1.1rem; }
.ig-suggest.kb-open .ig-suggest-close { top: calc(.4rem + env(safe-area-inset-top, 0px)); }
.ig-suggest.kb-open .ig-suggest-form { gap: .6rem; }
.ig-suggest.kb-open .ig-suggest-text { min-height: 4.5rem; resize: none; }
html.ig-hc .ig-suggest { background: #000 !important; color: #fff !important; }
html.ig-hc .ig-suggest-close { background: #222 !important; color: #fff !important; }
html.ig-hc .ig-suggest-select,
html.ig-hc .ig-suggest-text { background: #000 !important; color: #fff !important; border-color: #fff !important; }
html.ig-hc .ig-suggest-submit { background: #fff !important; color: #000 !important; }
@media (prefers-reduced-motion: reduce) {
    .ig-suggest, .ig-suggest.open { transition: none; }
}

/* ── Gezien: bezochte stops en afgeronde tours (inc/seen.inc.php) ─────────────────────────────
   In de museumkleur: foto zwart-wit met een waas in de huiskleur (mix-blend-mode: color), kaart
   licht getint, label als pil in de museumkleur. Alles blijft gewoon aanklikbaar.
   Opnieuw beginnen: menu → "Restart tour" (tour-restart.php). color-mix() zodat het met elke
   huiskleur werkt, ongeacht welke --brand-bg-aXX-varianten een pagina definieert. */
.ig-seen-badge {
    display: none;
    align-items: center;
    gap: .25rem;
    padding: .25rem .55rem;
    border-radius: 99px;
    background: var(--brand-bg);
    color: var(--brand-ink);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.ig-seen-badge .ig-icon { width: 12px; height: 12px; stroke-width: 3; }
.is-seen .ig-seen-badge { display: inline-flex; }

/* Gedeelde waas over de foto */
.ig-poi-card.is-seen .ig-poi-card-thumb::after,
.ig-poi-item.is-seen .ig-poi-item-thumb::after,
.ig-tour-card.is-seen .ig-tour-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--brand-bg);
    mix-blend-mode: color;
    opacity: .85;
    pointer-events: none;
}
.ig-poi-card.is-seen .ig-poi-card-thumb img,
.ig-poi-item.is-seen .ig-poi-item-thumb img { filter: grayscale(1) contrast(.9) brightness(1.05); }

/* Kaart (raster) */
.ig-poi-card-thumb .ig-seen-badge { position: absolute; top: .5rem; right: .5rem; z-index: 2; }
.ig-poi-card.is-seen {
    background: color-mix(in srgb, var(--brand-bg) 8%, #fff);
    border-color: color-mix(in srgb, var(--brand-bg) 30%, #fff);
}
.ig-poi-card.is-seen .ig-poi-card-title { color: color-mix(in srgb, var(--brand-bg) 55%, #1C2526); }

/* Lijst (classic / compact / featured) */
.ig-seen-badge--item { flex-shrink: 0; box-shadow: none; }
.ig-poi-item.is-seen {
    background: color-mix(in srgb, var(--brand-bg) 8%, #fff);
    border-color: color-mix(in srgb, var(--brand-bg) 30%, #fff);
}
.ig-poi-item.is-seen .ig-poi-name { color: color-mix(in srgb, var(--brand-bg) 55%, #1C2526); }
.ig-poi-item--hero.is-seen { background: transparent; }
.ig-poi-item--hero.is-seen .ig-poi-name { color: #fff; }

/* Tourkaart: alle stops gezien */
/* "Completed" midden bovenaan de foto, in elke lay-out */
.ig-tour-thumb .ig-seen-badge {
    position: absolute;
    top: .65rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.ig-tour-card.is-seen { border-color: color-mix(in srgb, var(--brand-bg) 30%, #fff); }
.ig-tour-card.is-seen .ig-tour-body { background-color: color-mix(in srgb, var(--brand-bg) 8%, #fff); }
.ig-tour-card.is-seen .ig-tour-title { color: color-mix(in srgb, var(--brand-bg) 55%, #1C2526); }
/* Bij Raster en Foto-banner staat de tekst over de foto (eigen verloop): daar wit houden */
.ig-tours--grid .ig-tour-card.is-seen .ig-tour-body,
.ig-tours--banner .ig-tour-card.is-seen .ig-tour-body { background-color: transparent; }
.ig-tours--grid .ig-tour-card.is-seen .ig-tour-title,
.ig-tours--banner .ig-tour-card.is-seen .ig-tour-title { color: #fff; }

/* Hoog contrast: geen kleurwaas, wel duidelijk gemarkeerd */
html.ig-hc .ig-poi-card.is-seen,
html.ig-hc .ig-poi-item.is-seen { background: #000 !important; border-style: dashed !important; }
html.ig-hc .is-seen .ig-poi-card-thumb::after,
html.ig-hc .is-seen .ig-poi-item-thumb::after,
html.ig-hc .is-seen .ig-tour-thumb::after { display: none; }
html.ig-hc .ig-poi-card.is-seen .ig-poi-card-title,
html.ig-hc .ig-poi-item.is-seen .ig-poi-name,
html.ig-hc .ig-tour-card.is-seen .ig-tour-title { color: #bbb !important; }
html.ig-hc .ig-seen-badge { background: #fff !important; color: #000 !important; }

/* Bevestiging "Restart tour": zelfde opmaak als uitloggen, maar in de museumkleur i.p.v. rood */
.ig-restart-confirm { background: var(--brand-bg); color: var(--brand-ink); font-family: inherit; }
html.ig-hc .ig-restart-confirm { background: #fff !important; color: #000 !important; }

/* ── Plattegrond (vierde weergave in de stoplijst) ──
   Markup: inc/floor_plan.inc.php, gedrag: js/floor-plan.js, beheer: backstage → Tours → Floor plans.
   De kaart past bij zoom 1 in de breedte én in de (begrensde) hoogte; verder ingezoomd scroll je
   gewoon binnen het vlak. Pins staan in procenten, dus ze blijven op hun plek bij elke zoom. */
.ig-floor {
    max-width: 960px;
    margin: 0 auto;
    padding: .25rem .75rem 1.5rem;
}
.ig-floor-tabs {
    display: flex;
    gap: .375rem;
    overflow-x: auto;
    padding: 0 0 .5rem;
    scrollbar-width: none;
}
.ig-floor-tabs::-webkit-scrollbar { display: none; }
.ig-floor-tab {
    flex-shrink: 0;
    border: 1px solid #E8E1D6;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    padding: .45rem .9rem;
    border-radius: 99px;
    cursor: pointer;
}
.ig-floor-tab.active {
    background: var(--brand-bg);
    border-color: var(--brand-bg);
    color: var(--brand-ink);
}
.ig-floor-stage { position: relative; }
.ig-floor-scroll {
    position: relative;
    width: 100%;
    height: 260px;           /* js/floor-plan.js zet de echte hoogte: verhouding van de plattegrond */
    max-height: min(calc(100dvh - 210px), 150vw);
    min-height: 160px;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid #E8E1D6;
    background: #fff;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
}
.ig-floor-scroll[hidden] { display: none; }
.ig-floor-canvas {
    position: relative;
    flex-shrink: 0;
    margin: auto;            /* midden in het vlak zolang hij kleiner is */
    width: 100%;
}
.ig-floor-img {
    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.ig-floor-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    min-width: 30px;
    height: 30px;
    padding: 0 .4rem;
    border-radius: 99px;
    border: 2px solid #fff;
    background: var(--brand-bg);
    color: var(--brand-ink);
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.28);
    cursor: pointer;
    transition: transform .15s, opacity .15s;
    z-index: 1;
}
/* Groter tikvlak dan het zichtbare rondje */
.ig-floor-pin::before { content: ""; position: absolute; inset: -9px; border-radius: 99px; }
.ig-floor-pin.is-active {
    transform: translate(-50%, -50%) scale(1.25);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-bg) 35%, transparent), 0 3px 10px rgba(0,0,0,.3);
    z-index: 2;
}
.ig-floor-pin.is-seen {
    background: color-mix(in srgb, var(--brand-bg) 35%, #fff);
    color: color-mix(in srgb, var(--brand-bg) 70%, #1C2526);
}
.ig-floor-pin.is-dimmed { opacity: .2; pointer-events: none; }

.ig-floor-zoom {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    z-index: 3;
}
.ig-floor-zoom-btn {
    width: 40px;
    height: 40px;
    border: 0;
    background: #fff;
    color: #1C2526;
    font: inherit;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
.ig-floor-zoom-btn + .ig-floor-zoom-btn { border-top: 1px solid #E8E1D6; }
.ig-floor-zoom-btn:disabled { color: #C8BEB4; cursor: default; }

.ig-floor-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .625rem;
    padding: .5rem .875rem .5rem .5rem;
    background: #fff;
    border: 1px solid #E8E1D6;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.ig-floor-card[hidden] { display: none; }
.ig-floor-card-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--brand-bg-a22, #eee) center / cover no-repeat;
}
.ig-floor-card.is-seen .ig-floor-card-thumb { filter: grayscale(1); }
.ig-floor-card-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.ig-floor-card-num {
    flex-shrink: 0;
    min-width: 28px;
    height: 28px;
    padding: 0 .45rem;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
}
.ig-floor-card-name {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ig-floor-card-open {
    flex-shrink: 0;
    font-size: .8rem;
    font-weight: 700;
    color: var(--brand-bg);
    white-space: nowrap;
}
@media (min-width: 720px) {
    .ig-floor-scroll { max-height: min(calc(100dvh - 230px), 720px); }
    .ig-floor-pin { min-width: 34px; height: 34px; font-size: .85rem; }
}
html.ig-hc .ig-floor-tab.active { background: #fff !important; color: #000 !important; }
html.ig-hc .ig-floor-pin { background: #fff !important; color: #000 !important; border-color: #000 !important; }