html { overflow-y: scroll; }
body {
    background-color: #f0f2f5;
    color: #333;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    margin: 0;
    /* = hoogte header (68) + hoogte subbalk (58). Die drie horen bij elkaar: verander je er één, pas de andere mee aan
       (alleen desktop; op mobiel staat deze waarde verderop in de mobiele regels apart). */
    padding-top: 126px;
}

::view-transition-group(*) { animation-duration: 0.4s; }

.bovenste-lagen-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.hoofd-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 20px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-rij {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 14px 0;
    box-sizing: border-box;
    background-color: #1e293b;
    border-bottom: 1px solid #0f172a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    position: absolute;
    top: 0;
    left: 0;
    height: 68px;
}

/* Inhoudsbreedte: 1020px, maar nooit breder dan het scherm (min. 12px marge links/rechts). Voorheen
   stond hier een vaste 1020px, waardoor tussen 769 en 1020px schermbreedte alles van het scherm afliep. */
.header-inhoud {
    display: flex;
    align-items: center;
    gap: 15px;
    width: min(1020px, calc(100% - 24px));
    box-sizing: border-box;
}

.logo-vlak { display: flex; align-items: center; background: transparent; border: none; padding: 0; margin-top: 0; }
.app-logo { height: 40px; width: auto; object-fit: contain; display: block; filter: brightness(0) invert(1); }

.zoekbalk-wrapper {
    display: flex;
    align-items: center;
    flex-grow: 1;
    height: 35px;
    background: #ffffff;
    border: 1px solid #475569;
    border-radius: 4px;
    padding: 0 10px;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.zoekbalk-wrapper:focus-within { border-color: #94a3b8; }
.zoek-icoon { width: 14px; height: 14px; color: #94a3b8; flex-shrink: 0; }
.zoek-scheider { width: 1px; height: 14px; background-color: #e2e8f0; margin: 0 8px; flex-shrink: 0; }

#zoekbalk {
    flex-grow: 1;
    height: 100% !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
    font-family: inherit;
    font-size: 13.3333px;
    color: #334155;
}

.zoek-wis-knop {
    display: none;
    background: transparent;
    border: none;
    padding: 0;
    margin-left: 6px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.zoek-wis-knop:hover { color: #475569; }
.zoek-wis-knop svg { width: 14px; height: 14px; }

/* Zelfde tussenruimte (15px) als tussen logo, zoekbalk en dit blok (.header-inhoud), zodat de hele balk één ritme heeft. */
.header-knoppen { display: flex; gap: 15px; align-items: center; position: relative; }
.menu-opties-wrapper { position: relative; display: inline-block; }

/* Het accountmenu heeft geen eigen plek in de header: het hangt aan de rechteronderkant van de
   header-knoppen (zowel desktop als mobiel) en wordt geopend via de profiel-badge. */
.menu-dropdown-wrapper { position: absolute; top: 100%; right: 0; }

.menu-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    z-index: 1002;
    min-width: 220px;
    max-width: min(300px, calc(100vw - 16px));
    padding: 4px 0;
}
.menu-dropdown-wrapper.open .menu-dropdown-menu { display: block; }
.menu-dropdown-kop {
    padding: 8px 14px 9px 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
}
.menu-kop-naam, .menu-kop-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-kop-naam { font-size: 13px; font-weight: 600; color: #0f172a; }
.menu-kop-email { font-size: 11px; color: #64748b; margin-top: 1px; }
.menu-dropdown-scheiding { height: 1px; background: #e2e8f0; margin: 4px 0; }

/* Schakelaar-rij in het accountmenu ("Bekeken tonen"): label links, schakelaartje rechts. */
.menu-dropdown-schakelaar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.schakelaar {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 16px;
    border-radius: 8px;
    background: #cbd5e1;
    transition: background 0.15s ease;
}
.schakelaar::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: transform 0.15s ease;
}
.menu-dropdown-schakelaar[aria-checked="true"] .schakelaar { background: #3b82f6; }
.menu-dropdown-schakelaar[aria-checked="true"] .schakelaar::after { transform: translateX(12px); }

/* Menu-item "Bekeken" verbergen (schakelaar in het accountmenu): ALLEEN het item in de navigatie, niets anders.
   Badges, vinkjes, het formulier en alle gegevens blijven gewoon bestaan. Bewust zonder !important: de id-selector
   wint al van `.tab-btn` / `.navbalk-knop`, en op deze twee knoppen staat nergens een inline display. */
body.bekeken-menu-uit #tab-bekeken,
body.bekeken-menu-uit #navbalk-bekeken { display: none; }
.menu-dropdown-item {
    padding: 8px 14px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    text-align: left;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.menu-dropdown-item:hover { background: #f1f5f9; color: #0f172a; }

.subbalk-rij {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #e8edf4;
    border-bottom: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    position: absolute;
    top: 68px;
    left: 0;
    height: 58px; /* was 52px: iets meer lucht boven en onder de tabs en filters (v5.9.143); zie ook body padding-top */
    box-sizing: border-box;
}

.subbalk-inhoud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: min(1020px, calc(100% - 24px));
    height: 100%;
    box-sizing: border-box;
}

.filter-tabs { display: flex; gap: 8px; align-items: center; height: 100%; }

/* Tabs "Mijn verzameling"/"Mijn zoeklijst": 37px hoog, 13px tekst (bewust iets groter dan de filtervelden). */
.tab-btn {
    background: #cbd5e1;
    border: none;
    color: #0f172a;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    padding: 0 13px;
    height: 37px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
    user-select: none;
}

.tab-btn:hover { background: #94a3b8; }
.tab-btn:active { transform: scale(0.98); }
.tab-btn.actief { color: #ffffff; font-weight: 400; background: #3b82f6; }
.tab-btn.actief:hover { background: #2563eb; }

.subbalk-opties { display: flex; align-items: center; gap: 8px; }

.boxset-inline-vink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #334155;
    cursor: pointer;
    user-select: none;
    height: 30px;
}
.boxset-inline-vink:hover { color: #0f172a; }

.subbalk-vinkvakje {
    width: 16px;
    height: 16px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s ease;
}
.boxset-inline-vink:hover .subbalk-vinkvakje { border-color: #94a3b8; }
.subbalk-vinkvakje.checked::after { content: '✓'; color: #097edc; font-weight: bold; font-size: 12px; display: block; }

.subbalk-filter-wrapper { position: relative; text-align: left; box-sizing: border-box; }

.subbalk-filter-box {
    height: 30px !important;
    padding: 2px 20px 2px 8px !important;
    font-size: 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23334155' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 8px 5px !important;
    color: #334155 !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    min-width: 110px;
    max-width: 160px;
}

.subbalk-filter-box span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; display: block; }

.subbalk-filter-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 160px;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    z-index: 1002;
    padding: 4px 0;
    box-sizing: border-box;
}

.subbalk-filter-wrapper.open .subbalk-filter-menu { display: block; }
.subbalk-filter-menu .custom-multiselect-scroll { max-height: 220px; overflow-y: auto; }

/* --- Speelduurfilter (schuifje "Hoeveel tijd heb je?") --- */
.subbalk-filter-wrapper.filter-actief .subbalk-filter-box { border-color: #3b82f6 !important; }
.speelduur-menu { width: 280px; padding: 10px 12px 6px 12px !important; }
/* Tekst in dezelfde stijl als de andere filtermenu's: 12px, grijs; de gekozen waarde vet en donker
   (zoals een gekozen optie), "Wissen" zoals de "+ … bewerken"-regels (geen onderstreping). */
.speelduur-kop { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: #666; }
.speelduur-wis { cursor: pointer; color: #5f6368; font-weight: 500; transition: color 0.15s ease; }
.speelduur-wis:hover { color: #111111; }
.speelduur-waarde { font-size: 12px; font-weight: 600; color: #111111; margin: 4px 0 2px 0; }
/* Schaal onder het spoor: elk getal staat precies onder de plek waar het bolletje dan staat
   (--p = positie 0..1; het spoor loopt van half-bolletje tot half-bolletje, vandaar --duim-px). */
.speelduur-menu { --duim-px: 14px; }
.speelduur-schaal { position: relative; height: 14px; font-size: 10px; color: #94a3b8; margin-top: 6px; }
/* Liniaal: heel lichte streepjes boven elk getal, precies op de plek van die tijd op het spoor. */
.speelduur-schaal span::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    width: 1px;
    height: 5px;
    background: #dbe2ea;
}
.speelduur-schaal span:first-child::before { left: calc(var(--duim-px) / 2); }
.speelduur-schaal span:last-child::before { left: auto; right: calc(var(--duim-px) / 2); }
.speelduur-schaal span {
    position: absolute;
    top: 0;
    left: calc(var(--duim-px) / 2 + (100% - var(--duim-px)) * var(--p));
    transform: translateX(-50%);
    white-space: nowrap;
}
.speelduur-schaal span:first-child { transform: translateX(calc(-1 * var(--duim-px) / 2)); }
.speelduur-schaal span:last-child { transform: translateX(calc(-100% + var(--duim-px) / 2)); }

/* Het schuifje: één spoor met twee bolletjes. Technisch twee <input type="range"> precies over elkaar; hun
   eigen sporen zijn onzichtbaar en alleen de bolletjes vangen muis/vinger op. Het zichtbare spoor tekent
   .speelduur-spoor zelf, met het blauwe stuk tussen de bolletjes (--van / --tot, gezet door app.js). */
.speelduur-spoor {
    position: relative;
    height: 24px;
    --van: 0%;
    --tot: 100%;
    --duim: 14;          /* breedte pijltje (px), gebruikt door app.js bij het slepen */
    cursor: pointer;
    touch-action: none;  /* horizontaal slepen op telefoon zonder dat de pagina meescrolt */
}
.speelduur-spoor::before {
    content: "";
    position: absolute;
    left: calc(var(--duim) * 1px / 2);
    right: calc(var(--duim) * 1px / 2);
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 2px;
    background: linear-gradient(to right, #cbd5e1 0%, #cbd5e1 var(--van), #3b82f6 var(--van), #3b82f6 var(--tot), #cbd5e1 var(--tot), #cbd5e1 100%);
}
.speelduur-schuif {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none !important;
    pointer-events: none;
    z-index: 2;
}
.speelduur-schuif::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.speelduur-schuif::-moz-range-track { background: transparent; }
.speelduur-schuif::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: none;
    width: 14px;
    height: 14px;
    opacity: 0;           /* onzichtbaar: de pijltjes hieronder zijn wat je ziet */
}
.speelduur-schuif::-moz-range-thumb { pointer-events: none; width: 14px; height: 14px; opacity: 0; border: none; }

/* De pijltjes: driehoekjes die naar binnen wijzen (links ▶, rechts ◀), helemaal blauw (v5.9.119). --p (0..1) zet app.js; het spoor loopt van half-pijltje tot half-pijltje. */
.speelduur-greep {
    position: absolute;
    top: 50%;
    left: calc(var(--duim) * 1px / 2 + (100% - var(--duim) * 1px) * var(--p, 0));
    width: calc(var(--duim) * 1px);
    height: calc(var(--duim) * 1px + 2px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 3;
}
.speelduur-greep.greep-max { --p: 1; }
.speelduur-greep svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.2)); }
.speelduur-greep polygon {
    fill: #3b82f6;
    stroke: #3b82f6;
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: stroke 0.15s ease;
}
.speelduur-spoor:hover .speelduur-greep polygon { fill: #2563eb; stroke: #2563eb; }
.speelduur-schuif:focus-visible ~ .speelduur-greep polygon { fill: #1d4ed8; stroke: #1d4ed8; }

.weergave-knoppen-groep {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
    padding-left: 6px;
    border-left: 1px solid #cbd5e1;
    height: 30px;
}

.weergave-icoon-btn {
    background: transparent;
    border: none;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.weergave-icoon-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* Sorteer-icoontje naast Galerij/Details: op elk formaat gelijk. De wrapper hergebruikt
   .custom-multiselect-wrapper voor de open/dicht-logica, maar die klasse is bedoeld voor brede
   formuliervelden (breedte/marge) — dat resetten we hier expliciet. */
#sorteer-wrapper {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}
#sorteer-menu {
    width: 170px !important;
    left: auto !important;
    right: 0 !important;
    top: calc(100% + 4px) !important;
}
.weergave-icoon-btn:hover { color: #475569; background-color: #cbd5e1; }
.weergave-icoon-btn.actief { color: #3b82f6; }
.weergave-icoon-btn.actief:hover { color: #2563eb; background-color: #cbd5e1; }

.custom-select-optie {
    padding: 6px 12px;
    font-size: 12px;
    color: #334155;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.custom-select-optie:hover { background: #f1f5f9; color: #0f172a; }
/* Gekozen optie: overal zoals in het locatiemenu op de kaartjes — gewoon vet en donker, geen blauwe balk. */
.custom-select-optie.actief-item { color: #111111; font-weight: 600; }
.custom-select-optie.nieuw-item { border-top: 1px solid #eee; color: #5f6368; font-weight: 500; }
.custom-select-optie.nieuw-item:hover { color: #111111; background: #f0f4f8; }

.label-beheer-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    padding: 4px 8px 4px 12px;
    font-size: 13px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    box-sizing: border-box;
}
.label-beheer-rij:last-child { border-bottom: none; }
.label-beheer-rij:hover { background: #f8fafc; }
.label-beheer-rij.is-bewerken, .label-beheer-rij.is-verwijderen { background: #f1f5f9; }
.label-beheer-rij.is-verwijderen { background: #fff1f2; }
.beheer-naam, .beheer-vraag { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beheer-vraag small { color: #64748b; }
.beheer-leeg { padding: 10px; font-size: 12px; color: #666; text-align: center; }

/* Inline invoerveld bij hernoemen: zelfde hoogte als de rij, geen extra kader-sprong. */
.label-beheer-rij input.beheer-hernoem-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    padding: 2px 8px;
    font-size: 13px;
}

/* Potlood (hernoemen), kruisje (verwijderen / annuleren), vinkje (bevestigen): dezelfde stijl als de
   icoontjes op de kaartjes — lijn-icoon, lichte zoom bij hover. */
.beheer-knoppen { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.beheer-icoon-btn {
    background: transparent;
    border: none;
    padding: 0;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.beheer-icoon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.beheer-icoon-btn:hover { transform: scale(1.12); background: #e2e8f0; }
.beheer-potlood:hover { color: #eab308; }
.beheer-kruis:hover, .beheer-bevestig-verwijder { color: #d6414f; }
.beheer-opslaan { color: #16a34a; }
.beheer-annuleer:hover { color: #0f172a; }

input, select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    font-family: inherit;
    font-size: 13.3333px;
    color: #334155;
    box-sizing: border-box;
    height: 35px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

input:focus, select:focus { outline: none; border-color: #097edc; box-shadow: 0 0 0 2px rgba(9, 126, 220, 0.15); }
select.input-fout, input.input-fout, .custom-multiselect-box.input-fout { border-color: #d6414f !important; background-color: #fff8f8 !important; box-shadow: none !important; }

button.main-btn { padding: 8px 12px; background: #2bb673; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; font-family: inherit; height: 35px; white-space: nowrap; transition: background 0.15s ease, transform 0.1s ease; }
button.main-btn:hover { background: #249e62; }
button.main-btn:active { transform: scale(0.98); }

button.sec-btn {
    padding: 8px 10px;
    background: #cbd5e1;
    color: #1e293b;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    height: 35px;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
button.sec-btn:hover { background: #94a3b8; color: #0f172a; }
button.sec-btn:active { transform: scale(0.98); }
button.sec-btn.actief { background: #f97316; color: #ffffff; font-weight: 400; }
button.sec-btn.actief:hover { background: #ea580c; color: #ffffff; }

button.sec-btn.foto-beheer-btn { background: #cbd5e1; color: #1e293b; font-weight: 400; border: none; }
button.sec-btn.foto-beheer-btn:hover { background: #94a3b8; color: #0f172a; }

button.sec-btn.annuleer-btn { background: #cbd5e1; color: #1e293b; font-weight: 400; border: none; }
button.sec-btn.annuleer-btn:hover { background: #94a3b8; color: #0f172a; }

button.btn-delete-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5f6368;
    height: 35px;
    width: 35px;
}
button.btn-delete-icon svg { width: 24px; height: 24px; overflow: visible; }
button.btn-delete-icon .trash-lid { transform-origin: 90px 23px; transition: transform 0.2s ease-in-out; }
button.btn-delete-icon:hover { color: #d6414f; }
button.btn-delete-icon:hover .trash-lid { transform: rotate(25deg); }

input[type="file"]::file-selector-button {
    padding: 6px 10px;
    background: #e0e0e0;
    color: #333;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    margin-right: 8px;
}

.boven-opties-wrapper { width: 100%; max-width: 300px; margin: 0 auto 4px auto; text-align: left; }

.boven-opties-btn {
    background: transparent;
    border: none;
    color: #666;
    font-size: 11px;
    font-weight: 400;
    font-family: inherit;
    cursor: pointer;
    padding: 2px 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: color 0.15s ease;
}
.boven-opties-btn .plus-teken { color: inherit; font-weight: 400; }
.boven-opties-btn:hover { color: #111; }

.form-veld-groep { margin-bottom: 10px; text-align: center; }
.form-veld-groep input, .form-veld-groep select { width: 100%; max-width: 300px; box-sizing: border-box; }

.form-veld-groep.dubbel-veld {
    width: 100%;
    max-width: 300px;
    margin: 0 auto 10px auto;
    display: flex;
    gap: 10px;
}
.form-veld-groep.dubbel-veld input,
.form-veld-groep.dubbel-veld .custom-multiselect-wrapper {
    width: 50% !important;
    margin: 0 !important;
}

.custom-multiselect-wrapper {
    width: 100%;
    max-width: 300px;
    margin: 0 auto 10px auto;
    position: relative;
    text-align: left;
    box-sizing: border-box;
}
.custom-multiselect-box {
    padding: 8px 24px 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23000000' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    font-family: inherit;
    font-size: 13.3333px;
    cursor: pointer;
    display: flex;
    align-items: center;
    user-select: none;
    box-sizing: border-box;
    width: 100%;
    height: 35px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.custom-multiselect-box span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; display: block; }
.custom-multiselect-wrapper.open .custom-multiselect-box { border-color: #097edc; box-shadow: 0 0 0 2px rgba(9, 126, 220, 0.15); }
.custom-multiselect-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 2px;
    background: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    z-index: 100;
    padding: 4px 0;
    box-sizing: border-box;
}
.custom-multiselect-wrapper.open .custom-multiselect-menu { display: block; }
.custom-multiselect-scroll { max-height: 140px; overflow-y: auto; }

.custom-multiselect-optie {
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.3333px;
    color: #334155;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.custom-multiselect-optie:hover { background: #f0f4f8; color: #111111; }
/* Gekozen optie: overal zoals in het locatiemenu op de kaartjes — gewoon vet en donker, geen blauwe balk. */
.custom-multiselect-optie.actief-item { color: #111111; font-weight: 600; }
.custom-multiselect-optie.nieuw-item { border-top: 1px solid #eee; color: #5f6368; font-weight: 500; font-size: 12px; white-space: nowrap; }
.custom-multiselect-optie.nieuw-item:hover { color: #111111; background: #f0f4f8; }

.checkbox-rij-dubbel {
    width: 100%;
    max-width: 300px;
    margin: 0 auto 10px auto;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
}

.checkbox-rij-dubbel > .checkbox-wrapper:first-child {
    flex: 0 0 115px;
}

/* "Gezien met: Thomas / Pieter / Martine" in het formulier (alleen zichtbaar als Status "Bekeken" aan staat). */
.gezien-met-rij {
    width: 100%;
    max-width: 300px;
    margin: -2px auto 12px auto;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
}
.gezien-met-label { font-size: 12px; color: #64748b; flex: 0 0 100%; margin-bottom: -2px; }

.checkbox-wrapper span {
    white-space: nowrap;
}

.checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.3333px;
    color: #334155;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
}
.custom-checkbox {
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.custom-checkbox.checked::after { content: '✓'; color: #097edc; font-weight: bold; font-size: 14px; display: block; }
input[type="checkbox"].verborgen-check { display: none; }

.modal-subbalk-stijl { font-size: 12px !important; color: #334155 !important; font-weight: 400 !important; font-family: inherit !important; }

.modal-knoppenbalk {
    width: 100%;
    max-width: 300px;
    margin: 15px auto 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 20px 0;
}

.actie-paneel {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    width: 420px;
    max-width: 90%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    box-sizing: border-box;
    max-height: 90vh;
    overflow-y: auto;
}

/* --- Trailer-venster: alleen de video (standaard YouTube-speler), geen wit paneel eromheen --- */
.trailer-modal-overlay {
    z-index: 1060; /* boven de mobiele onderbalk (1002), zodat die niet over het trailervenster heen ligt */
    background: rgba(0, 0, 0, 0.85);
    padding: 20px;
    box-sizing: border-box;
}

.trailer-modal-box {
    position: relative;
    width: 100%;
    max-width: 900px;
}

/* Balk boven de video: links (indien nodig) de melding over een vervangende trailer, rechts de sluitknop.
   Bewust bóven de video en niet eroverheen, zodat YouTube's eigen bediening vrij blijft. */
.trailer-bovenbalk {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 8px;
    min-height: 34px;
}

#trailer-sluit-btn {
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
#trailer-sluit-btn svg { width: 17px; height: 17px; }
#trailer-sluit-btn:hover { background: rgba(255,255,255,0.22); color: #ef4444; transform: scale(1.08); }

.trailer-video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.trailer-video-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

#trailer-iframe-houder {
    position: absolute;
    inset: 0;
}

#trailer-fallback-label {
    margin-right: auto;
    color: #fbbf24;
    font-size: 13px;
    font-weight: 500;
    background: rgba(0,0,0,0.4);
    padding: 6px 12px;
    border-radius: 6px;
    display: none;
    align-items: center;
    gap: 10px;
}

#trailer-vervanger-ok, #trailer-vervanger-nee {
    background: transparent;
    border: none;
    width: 22px;
    height: 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e2e8f0;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}
#trailer-vervanger-ok svg, #trailer-vervanger-nee svg { width: 16px; height: 16px; }
#trailer-vervanger-ok:hover { color: #22c55e; transform: scale(1.15); }
#trailer-vervanger-nee:hover { color: #ef4444; transform: scale(1.15); }

#aantal-teller {
    width: min(1020px, calc(100% - 24px));
    margin: 8px auto 0 auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#aantal-teller-tekst {
    font-size: 12px;
    color: #666;
}

/* De weergave-knoppen-groep staat hier nu in (verplaatst vanuit de filterbalk), dus de linker
   scheidingslijn/marge die daar nodig was, is hier overbodig. */
#aantal-teller .weergave-knoppen-groep {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

/* Zoveel kolommen als er passen (op een breed scherm 6 in galerij, 5 in details — zoals altijd).
   1022px = precies 6 x 162 + 5 x 10 tussenruimte. */
.fotomuur {
    display: grid;
    grid-template-columns: repeat(auto-fill, 162px);
    justify-content: start;
    gap: 10px;
    width: min(1022px, calc(100% - 24px));
    margin: 10px auto 0 auto;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    transition: grid-template-columns 0.2s ease;
}

.fotomuur.details-modus {
    grid-template-columns: repeat(auto-fill, 196px);
}

.item-kaart {
    background: #ffffff;
    border-radius: 0px;
    padding: 8px 9px 6px 9px;
    width: 162px;
    height: auto;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease, width 0.2s ease;
}

.fotomuur.details-modus .item-kaart {
    width: 196px;
    padding: 8px 12px 6px 12px;
}

.item-kaart.menu-open { z-index: 100 !important; }

@media (hover: hover) {
    .item-kaart:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    }
    .item-kaart.is-placeholder:hover img { filter: none !important; }
}

.item-kaart.is-placeholder img {
    filter: grayscale(100%) opacity(60%);
    transition: filter 0.3s ease;
}

/* ===================== FOTO'S: ÉÉN SYSTEEM VOOR ALLES =====================
   Geldt voor desktop én mobiel, galerij én details, en voor DVD, Blu-ray, boxset en onderdeel van boxset:
   - De foto is altijd precies zo breed als het fotovak op het kaartje; de hoogte volgt vanzelf. Nooit bijsnijden,
     nooit vervormen.
   - Het fotovak is minstens zo hoog als een DVD-hoesje (212/144 van de breedte). Is een foto korter (bijv. een
     Blu-ray), dan staat hij onderaan in het vak met witruimte erboven. Is een foto hoger, dan groeit het vak mee.
   - Kaartjes in dezelfde rij zijn altijd even hoog (grid rekt ze uit). De extra ruimte komt BOVEN de foto, zodat
     foto's, titels en locaties in een rij netjes op één lijn onderaan staan.
   Techniek: het fotovak is een grid met één cel. Het onzichtbare ::before-element (minimumhoogte), de foto en —
   bij een boxset-onderdeel — de tweede (hover/tik-)foto liggen allemaal in díe ene cel. De cel is dus zo hoog als
   de hoogste van de drie; alles staat onderaan. Daardoor "springt" er ook niets bij het wisselen van foto. */
/* Bovenin het kaartje een lege, rekbare rij (vangt de extra hoogte op als een ander kaartje in de rij hoger is),
   daaronder het fotovak en — in detailweergave — de iconenkolom ernaast, precies even hoog als het fotovak. */
.card-main-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: 6px;
    width: 100%;
    flex: 1 1 auto;
}
.fotomuur.details-modus .card-main-content { grid-template-columns: minmax(0, 1fr) 22px; }
/* Titel in detailweergave precies zo breed als de foto (kaart minus iconenkolom 22px en tussenruimte 6px),
   zodat hij op hetzelfde punt afbreekt als in de galerijweergave. */
.fotomuur.details-modus .titel-text { width: calc(100% - 28px); }

.card-body-row {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    align-content: end;
    align-items: end;
    grid-row: 2;
    grid-column: 1;
    min-width: 0;
    box-sizing: border-box;
    position: relative;
}
.card-body-row::before {
    content: "";
    grid-area: 1 / 1;
    padding-top: 147.22%; /* 212/144: minimumhoogte in DVD-verhouding, % gaat uit van de breedte */
}
.card-body-row img {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: contain;
    display: block;
    box-shadow: 0 2px 2px rgba(0,0,0,0.12);
}
/* Proef v5.9.123: een internetfoto (geen eigen upload) die hoger is dan een DVD-hoesje wordt bijgesneden tot
   DVD-verhouding (zie URL_FOTOS_BIJSNIJDEN in app.js, dat zet deze klasse). Eigen foto's nooit.
   object-position bepaalt welk stuk overblijft: 'center' snijdt boven en onder evenveel weg
   ('top' = bovenkant blijft heel, 'bottom' = onderkant blijft heel). */
.card-body-row img.url-te-hoog {
    aspect-ratio: 144 / 212;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.kaart-iconen-kolom {
    display: none !important;
    position: relative;
    grid-row: 2;
    grid-column: 2;
    min-height: 150px; /* genoeg ruimte voor alle icoontjes + badges, ook bij een laag fotovak */
}

.iconen-boven {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

/* Per media-type een eigen top-waarde. Type komt letterlijk overeen met het "type"-veld van het item
   (zoals gekozen in het formulier, bijv. "DVD", "Blu-ray", "4K UHD", ...). Voeg zelf extra regels toe
   naar dit patroon voor andere types, en pas de pixelwaarde aan om te testen. */
.item-kaart[data-type="Blu-ray"] .iconen-boven {
    top: 30px;
}

.fotomuur.details-modus .kaart-iconen-kolom {
    display: block !important;
}

.icon-badge-btn {
    background: transparent;
    border: none;
    padding: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: default;
    transition: transform 0.15s ease, color 0.15s ease;
}

.icon-badge-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Bekeken-badge: rondje met vinkje, rechtsonder op het kaartje (in de regel met de locatie), precies onder
   de iconenkolom. Alleen in detailweergave. Sinds v5.9.127 getekend als gewoon lijn-icoontje (cirkel + vinkje
   in de SVG zelf), dus precies even groot en even dik als de icoontjes erboven (potlood, camera, ...).
   Grijs = nog niet bekeken, grijsblauw #64748b (zelfde als de andere icoontjes, bv. het oogje) = bekeken (v5.9.133, keuze Vincent). --- */
.item-kaart .js-icon-bekeken { display: none; }
.fotomuur.details-modus .item-kaart .icon-badge-btn.js-icon-bekeken {
    display: flex;
    flex: 0 0 auto;
    margin-right: 2px;              /* (iconenkolom 22px - knop 18px) / 2: midden onder de iconen */
    color: #cbd5e1;
    cursor: pointer;
}
.fotomuur.details-modus .item-kaart .icon-badge-btn.js-icon-bekeken.is-bekeken { color: #64748b; }
.fotomuur.details-modus .item-kaart .icon-badge-btn.js-icon-bekeken:hover { transform: scale(1.12); }
/* Ruimte vrijhouden voor de badge: jaar/type/locatie mogen niet tegen de badge aan lopen. */
.fotomuur.details-modus .metadata-links { max-width: calc(100% - 26px); }

/* --- "Gezien met"-avatarbadges (Thomas & Pieter) --- */
.icon-badge-btn.js-icon-gezien {
    cursor: pointer;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50%;
    position: relative;
}

.icon-badge-btn.js-icon-gezien.is-gezien::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    border: 1.5px solid white;
}

.item-kaart .avatar-icoon {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    box-shadow: none !important;
    border-radius: 50%;
    display: block;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: filter 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
}

.avatar-icoon.actief {
    filter: grayscale(0%);
    opacity: 1;
}

.icon-badge-btn.js-icon-gezien:hover .avatar-icoon {
    transform: scale(1.12);
}

.gezien-met-groep {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.icon-badge-btn.js-icon-edit,
.icon-badge-btn.js-icon-zoekreden {
    cursor: pointer;
}

.icon-badge-btn.js-icon-edit:hover,
.icon-badge-btn.js-icon-zoekreden:hover {
    transform: scale(1.12);
}

.icon-badge-btn.js-icon-edit:hover { color: #eab308; }
.icon-badge-btn.js-icon-zoekreden:hover { color: #3b82f6; }
.icon-badge-btn.actief-groen { color: #16a34a; }
.icon-badge-btn.actief-boxset { color: #c89345; }
.icon-badge-btn.actief-ster { color: #f59e0b; }
.icon-badge-btn.actief-ster svg { fill: #f59e0b; }
.icon-badge-btn.js-icon-trailer:hover { color: #dc2626; }

.titel-text {
    width: 100%;
    height: 2.5em;
    font-size: 0.72em;
    font-weight: 600;
    color: #1c2030;
    margin: 6px 0 0 0;
    padding-bottom: 2px;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left;
    box-sizing: border-box;
    transition: width 0.2s ease;
}

.metadata-text {
    width: 100%;
    font-size: 0.65em;
    color: #666;
    margin-top: 1px;
    text-align: left;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: width 0.2s ease;
}

/* Speelduur links bovenin het kaartje, boven de foto (alleen detailweergave; aan/uit via SPEELDUUR_BOVEN_FOTO
   in app.js). Staat bij elk kaartje, ook zonder speelduur (lege regel), zodat de foto's in een rij gelijk blijven. */
.duur-boven-foto {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65em;
    color: #666;
    line-height: 1.3;
    margin-bottom: 4px;
}
.duur-boven-foto svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.metadata-links { display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 100%; white-space: nowrap; }
/* Jaar/type/locatie blijven altijd op één regel (anders staan titels in een rij niet meer op één lijn).
   Past het niet, dan wordt alleen de locatienaam afgekapt met "…" — het locatiemenu zelf blijft gewoon zichtbaar. */
/* Jaar/type/speelduur krimpen niet; alleen als er écht geen plek is (héél smalle kaartjes) worden ze afgekapt,
   en dan blijft er altijd nog ruimte voor een stukje locatie ("W… ›"). Eerst krimpt dus de locatienaam. */
.metadata-links > span:first-child { flex: 0 0 auto; max-width: calc(100% - 46px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metadata-links .locatie-wrapper { flex: 0 1 auto; min-width: 34px; }
.metadata-links .locatie-tag { max-width: 100%; box-sizing: border-box; }
.metadata-links .locatie-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.zoeklijst-toevoeg-tag {
    cursor: pointer;
    color: #666;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 3px;
    border-radius: 3px;
    transition: color 0.15s ease, background 0.15s ease;
}
.zoeklijst-toevoeg-tag:hover { color: #111; background: #e8ecef; }
.zoeklijst-toevoeg-plus { display: inline-block; font-weight: 600; font-size: 0.95em; position: relative; top: -1px; }

.locatie-wrapper { position: relative; display: inline-block; }
.locatie-tag { cursor: pointer; color: #666; display: inline-flex; align-items: center; gap: 2px; padding: 1px 3px; border-radius: 3px; }
.locatie-tag:hover { color: #111; background: #e8ecef; }
.locatie-pijl { display: inline-block; font-size: 0.85em; transition: transform 0.2s ease; }
.locatie-tag.actief .locatie-pijl { transform: rotate(90deg); }

.custom-locatie-menu {
    display: none; position: absolute; top: 100%; left: 0; margin-top: 3px; background: #ffffff;
    border: 1px solid #dcdcdc; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.15); z-index: 1000; min-width: 110px; padding: 4px 0;
}
.custom-locatie-menu.open { display: block; }
.custom-locatie-menu.naar-boven { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 3px; }
.custom-locatie-optie { padding: 5px 10px; font-size: 1.1em; color: #5f6368; cursor: pointer; text-align: left; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.custom-locatie-optie:hover { background: #f0f4f8; color: #111111; }
.custom-locatie-optie.actief-item { font-weight: 600; color: #111111; }
.custom-locatie-optie.nieuw-item { border-top: 1px solid #eee; color: #5f6368; font-weight: 500; }
.custom-locatie-optie.nieuw-item:hover { color: #111111; background: #f0f4f8; }

.file-upload-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
    margin-top: 2px;
    font-size: 0.9em;
}
.file-upload-container input[type="file"] { display: none; }
.file-upload-label {
    padding: 5px 10px;
    background: #e0e0e0;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.9em;
}
.file-name-display { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 8px; color: #666; text-align: left; flex-grow: 1; }

/* Mobiel-only elementen (door JS toegevoegd) staan hier standaard uit; de mobiele media query hieronder
   zet ze aan wanneer relevant. Bewust vóór de media query gezet, zodat de normale bestandsvolgorde de
   mobiele regels altijd laat winnen bij gelijke specificiteit — geen !important nodig, en dus ook geen
   conflict met JS die deze elementen later zelf aan/uit zet (bijv. de login-knop/badge-wissel). */
#mobiele-navbalk, .mobiel-filter-backdrop, #mobiel-login-btn, #mobiel-profiel-badge { display: none; }

@media (max-width: 768px) {
    body { padding-top: 64px !important; }
    .header-rij { height: auto !important; min-height: 60px !important; padding: 10px 0 !important; }
    .subbalk-rij { top: 60px !important; }

    input, select, .custom-multiselect-box { font-size: 16px !important; height: 40px !important; }
    .subbalk-filter-box { font-size: 13px !important; height: 32px !important; }

    .actie-paneel { width: 92% !important; padding: 16px !important; max-height: 85vh !important; overflow-y: auto !important; }
    .custom-multiselect-optie { padding: 10px 12px !important; }

    .header-inhoud, .subbalk-inhoud, .fotomuur, #aantal-teller { width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; }

    .subbalk-inhoud { height: auto !important; padding-top: 8px !important; padding-bottom: 8px !important; flex-wrap: wrap !important; gap: 8px !important; }
    .subbalk-opties { width: 100% !important; justify-content: space-between !important; }

    .header-inhoud { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; }
    /* Logo voegt op mobiel niet meteen iets toe en kost alleen ruimte — weg ermee, zoekbalk krijgt die ruimte. */
    .logo-vlak { display: none !important; }

    .header-knoppen { order: 2 !important; display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 4px !important; }
    .header-knoppen button:not(#mobiel-login-btn):not(#mobiel-profiel-badge) { padding: 4px 8px !important; height: 30px !important; font-size: 11px !important; }
    .header-knoppen > .main-btn:not(#mobiel-login-btn) { display: none !important; }
    #mobiel-login-btn { display: inline-flex; align-items: center !important; align-self: center !important; background: #2bb673 !important; color: #ffffff !important; height: 32px !important; padding: 0 12px !important; }
    #mobiel-profiel-badge { display: none; align-self: center; }
    /* De desktop-badge hoort hier nooit te staan; en op mobiel wisselt login-knop/badge op basis
       van of er is ingelogd (auth.js zet de klasse 'is-ingelogd' op body). */
    #desktop-profiel-badge { display: none !important; }
    body.is-ingelogd #mobiel-login-btn { display: none !important; }
    body.is-ingelogd #mobiel-profiel-badge { display: flex !important; }
    /* Zoekbalk staat nu op de plek van het logo (links), de login-knop/badge blijft rechts. */
    .zoekbalk-wrapper { order: 1; width: calc(100% - 90px); }
    /* Kopregel: aan beide kanten iets minder ruimte (8px i.p.v. 12px), zodat de zoekbalk minstens zo breed
       oogt als de rij kaartjes eronder; zoekbalk en profielbadge iets hoger (38px) voor je duim. */
    .header-inhoud { padding-left: 8px !important; padding-right: 8px !important; }
    .zoekbalk-wrapper { flex: 1 1 auto; min-width: 0; height: 38px; }
    .header-knoppen #mobiel-profiel-badge { width: 38px; height: 38px; }

    #aantal-teller .weergave-icoon-btn { width: 34px !important; height: 34px !important; }

    .fotomuur { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; justify-content: center !important; gap: 10px !important; }
    .item-kaart { width: 100% !important; height: auto !important; padding: 8px !important; }
    .titel-text, .metadata-text { width: 100% !important; }
    .titel-text { font-size: 0.82em !important; }
    .metadata-text { font-size: 0.75em !important; }
    .duur-boven-foto { font-size: 0.75em; }

    /* ===================== MOBIELE ONDERBALK (Verzameling / Zoeklijst / + / Filters) ===================== */
    body { padding-bottom: 64px !important; }

    #mobiele-navbalk {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 58px;
        background: #1e293b;
        border-top: 1px solid #0f172a;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
        z-index: 1002;
        justify-content: space-around;
        align-items: stretch;
        box-sizing: border-box;
    }

    .navbalk-knop {
        background: transparent;
        border: none;
        color: #94a3b8;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-family: inherit;
        font-size: 10px;
        flex: 1 1 0;
        cursor: pointer;
        transition: color 0.15s ease;
    }
    .navbalk-knop svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .navbalk-knop.actief { color: #60a5fa; }
    .navbalk-knop.navbalk-toevoegen svg { width: 26px; height: 26px; color: #2bb673; }
    .navbalk-knop.navbalk-toevoegen.actief svg { color: #2bb673; }

    /* Bestaande filterbalk wordt op mobiel een "bottom sheet": standaard verborgen, */
    /* verschijnt van onderaf zodra je op het Filters-icoon tikt.                    */
    .subbalk-rij {
        display: none !important;
    }
    body.mobiel-filters-open .mobiel-filter-backdrop {
        display: block;
    }
    body.mobiel-filters-open .subbalk-rij {
        display: flex !important;
        position: fixed !important;
        top: auto !important;
        bottom: 58px !important;
        left: 0 !important;
        height: auto !important;
        max-height: 65vh;
        overflow: visible;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -6px 20px rgba(0,0,0,0.2);
        z-index: 1001;
        padding-bottom: 10px;
    }
    body.mobiel-filters-open .subbalk-inhoud { padding-top: 14px !important; }

    /* De tabs (Mijn verzameling/zoeklijst) staan al in de onderbalk, dus die hoeven niet dubbel in het filterpaneel. */
    body.mobiel-filters-open .filter-tabs { display: none !important; }

    /* Dropdown-menu's (Genre/Label) hadden een lagere z-index dan de achtergrond-overlay, waardoor een tik
       er "doorheen" op de overlay landde en het paneel meteen weer sloot. Dit trekt ze er weer bovenuit. */
    body.mobiel-filters-open .custom-multiselect-menu,
    body.mobiel-filters-open .subbalk-filter-menu {
        z-index: 1003 !important;
    }

    /* Binnen het filterpaneel is er onder de velden weinig ruimte (de onderbalk zit vlak eronder),
       dus de menu's klappen hier naar boven open i.p.v. naar beneden. */
    body.mobiel-filters-open .custom-multiselect-menu {
        top: auto !important;
        bottom: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 2px !important;
    }
    body.mobiel-filters-open .subbalk-filter-menu {
        top: auto !important;
        bottom: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 4px !important;
        /* Precies zo breed als het veld erboven: op een smal scherm (320px) stak het menu anders
           links buiten beeld (vaste min-breedte 160px > veldbreedte). */
        left: 0;
        right: 0;
        min-width: 0;
    }

    /* Nette, opgevulde indeling: Boxsets-vinkje bovenaan over de volle breedte,
       daaronder Genre/Label naast elkaar, en Sorteren over de volle breedte eronder. */
    body.mobiel-filters-open .subbalk-opties {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 12px !important;
        width: 100% !important;
        align-items: center;
    }
    /* Volgorde: Genre en Label bovenaan naast elkaar, Boxsets eronder. Sorteren zit nu in het losse
       icoontje naast Galerij/Details, dus die staat hier niet meer dubbel. */
    body.mobiel-filters-open #genreFilterDropdownWrapper { order: 1; }
    body.mobiel-filters-open #labelFilterDropdownWrapper { order: 2; }
    body.mobiel-filters-open .boxset-inline-vink {
        order: 4;
        justify-self: start;
    }
    body.mobiel-filters-open #sorteerDropdownWrapper { display: none !important; }
    /* Speelduur op mobiel: geen uitklapvak, het schuifje staat direct in het paneel (volle breedte),
       onder Genre/Label en boven Boxsets. Groter bolletje voor je duim. */
    body.mobiel-filters-open #speelduurFilterDropdownWrapper { order: 3; grid-column: 1 / -1; }
    body.mobiel-filters-open #speelduurFilterDropdownWrapper .subbalk-filter-box { display: none !important; }
    body.mobiel-filters-open #speelduurFilterDropdownWrapper .speelduur-menu {
        display: block !important;
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: 1px solid #cbd5e1;
        background: #ffffff;
    }
    body.mobiel-filters-open .speelduur-kop { font-size: 13px; }
    body.mobiel-filters-open .speelduur-waarde { font-size: 14px; }
    body.mobiel-filters-open .speelduur-spoor { height: 36px; --duim: 20; }
    body.mobiel-filters-open .speelduur-schuif::-webkit-slider-thumb { width: 20px; height: 20px; }
    body.mobiel-filters-open .speelduur-schaal { font-size: 11px; height: 15px; margin-top: 4px; }
    body.mobiel-filters-open .speelduur-menu { --duim-px: 20px; }
    body.mobiel-filters-open .subbalk-filter-wrapper {
        width: 100% !important;
    }
    body.mobiel-filters-open .subbalk-filter-box {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 42px !important;
        font-size: 14px !important;
        padding-left: 12px !important;
    }

    .mobiel-filter-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 999;
    }

    /* Foto's: op mobiel precies hetzelfde systeem als op desktop (zie "FOTO'S: ÉÉN SYSTEEM VOOR ALLES" hierboven).
       Hier staat alleen wat op mobiel anders is: de kolommen en kaartjes zijn vloeiend i.p.v. vast. */
    .fotomuur.details-modus { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; justify-content: center !important; }
    .fotomuur.details-modus .item-kaart { width: auto !important; height: auto !important; }

    /* Iconenkolom op mobiel iets breder (28px) dan op desktop (22px), omdat de kaartjes hier vloeiend zijn.
       Hoogte: even hoog als het fotovak ernaast (align-self: stretch). */
    .fotomuur.details-modus .card-main-content { grid-template-columns: minmax(0, 1fr) 28px; }
    .fotomuur.details-modus .kaart-iconen-kolom { height: auto !important; min-height: 150px; align-self: stretch !important; width: 28px !important; }
    /* Titel precies zo breed als de foto (kaart minus iconenkolom 28px en tussenruimte 6px), zodat hij op
       hetzelfde punt afbreekt als in de galerijweergave. */
    .fotomuur.details-modus .titel-text { width: calc(100% - 34px) !important; }
    .fotomuur.details-modus .metadata-text { width: 100% !important; }
    .fotomuur.details-modus .icon-badge-btn,
    .fotomuur.details-modus .icon-badge-btn.js-icon-gezien { width: 15px !important; height: 15px !important; }
    .fotomuur.details-modus .icon-badge-btn.js-icon-gezien .avatar-icoon { width: 15px !important; height: 15px !important; }
    /* Bekeken-icoontje: zelfde maat als de iconen hier (knop 15px), midden onder de iconenkolom van 28px. */
    .fotomuur.details-modus .item-kaart .icon-badge-btn.js-icon-bekeken { margin-right: 6.5px; }
    .fotomuur.details-modus .icon-badge-btn svg { width: 13px; height: 13px; }

    /* ===================== BOXSET-ONDERDEEL: tikken i.p.v. hoveren ===================== */
    /* Onderdruk de hover-versie (die op een touchscreen niet betrouwbaar werkt)... */
    .item-kaart.is-boxset-onderdeel:hover .card-body-row img.hoofd-foto { opacity: 1 !important; }
    .item-kaart.is-boxset-onderdeel:hover .card-body-row img.hover-foto { opacity: 0 !important; }
    /* ...en gebruik in plaats daarvan een klasse die bij een tik wordt aan/uit gezet.
       !important nodig: zonder dat verliest deze regel het van de hover-onderdrukking hierboven zodra
       een telefoon een "plakkerige" hover-status simuleert na een tik. */
    .item-kaart.is-boxset-onderdeel.tik-toont-eigen .card-body-row img.hoofd-foto { opacity: 0 !important; }
    .item-kaart.is-boxset-onderdeel.tik-toont-eigen .card-body-row img.hover-foto { opacity: 1 !important; }
    /* Camera-icoontje wisselt op mobiel mee met de tik (niet met hover), net als de foto hierboven. */
    .item-kaart.is-boxset-onderdeel:hover .camera-alleen-standaard { display: flex !important; }
    .item-kaart.is-boxset-onderdeel:hover .camera-alleen-eigen { display: none !important; }
    .item-kaart.is-boxset-onderdeel.tik-toont-eigen .camera-alleen-standaard { display: none !important; }
    .item-kaart.is-boxset-onderdeel.tik-toont-eigen .camera-alleen-eigen { display: flex !important; }

    /* Het bewerkformulier (#modal-overlay) zat met z-index 1000 ÓNDER de vaste onderbalk (1002) — daardoor
       verdween het onderste stuk (Opslaan/Annuleren) altijd achter de balk, hoe je ook scrolde binnen het
       formulier. Terwijl een formulier open staat kun je toch niet bij de onderbalk, dus die mag hier gerust
       onder liggen. */
    #modal-overlay { z-index: 1050 !important; }
}

/* --- BOXSET-ONDERDEEL: WISSELEN TUSSEN BOXSET-COVER EN EIGEN FOTO --- */
/* Beide foto's liggen in dezelfde fotovak-cel (zie het foto-systeem hierboven), allebei op volle breedte en
   onderaan. De standaardstand toont de boxset-cover — exact even groot als op de boxset zelf. Hover (desktop) of
   tik (mobiel, zie de mobiele media query) laat met een crossfade de eigen foto zien. Omdat het vak al op de
   hoogste van de twee is berekend, verspringt er niets. */
.item-kaart.is-boxset-onderdeel .card-body-row img.hoofd-foto,
.item-kaart.is-boxset-onderdeel .card-body-row img.hover-foto {
    transition: opacity 0.2s ease;
}

.item-kaart.is-boxset-onderdeel .card-body-row img.hover-foto {
    opacity: 0;
    pointer-events: none;
}

.item-kaart.is-boxset-onderdeel:hover .card-body-row img.hoofd-foto {
    opacity: 0;
}

.item-kaart.is-boxset-onderdeel:hover .card-body-row img.hover-foto {
    opacity: 1;
}

/* Groen camera-icoontje hoort bij de foto die je op dat moment ziet (zie app.js, cameraKlasse):
   'camera-alleen-standaard' = alleen bij de boxset-cover, 'camera-alleen-eigen' = alleen bij de eigen foto.
   Verbergen met display: none, zodat de icoontjes eronder omhoog schuiven (geen lege plek). */
.item-kaart.is-boxset-onderdeel .camera-alleen-eigen { display: none; }
.item-kaart.is-boxset-onderdeel:hover .camera-alleen-standaard { display: none; }
.item-kaart.is-boxset-onderdeel:hover .camera-alleen-eigen { display: flex; }

/* Lage schermen (telefoon liggend): het filterpaneel is dan hoger dan de ruimte boven de onderbalk. Dan mag het
   paneel scrollen, en klappen de Genre/Label-menu's gewoon ín het paneel open (naar beneden) i.p.v. erboven. */
@media (max-width: 768px) and (max-height: 500px) {
    body.mobiel-filters-open .subbalk-rij {
        max-height: calc(100vh - 58px - 10px) !important;
        overflow-y: auto !important;
    }
    body.mobiel-filters-open .subbalk-filter-menu {
        position: static !important;
        margin: 4px 0 0 0 !important;
        box-shadow: none !important;
    }
}

/* Heel smalle telefoons (bijv. iPhone SE, 320px): de vinkjes in het formulier ("Onderdeel van boxset",
   "Met de jongens kijken") liepen rechts net buiten het paneel. Hier mag de tekst in de rechterkolom over twee regels. */
@media (max-width: 360px) {
    .checkbox-rij-dubbel > .checkbox-wrapper:nth-child(n+2) { min-width: 0; }
    .checkbox-rij-dubbel > .checkbox-wrapper:nth-child(n+2) span { white-space: normal; line-height: 1.2; }
}

/* ============================================================
   MIJN BEKEKEN — lijstweergave (één regel per film)
   ============================================================ */
/* In "Mijn bekeken" zijn Galerij/Details niet van toepassing; sorteren blijft. */
body.bekeken-weergave #btn-view-grid, body.bekeken-weergave #btn-view-details { display: none; }

.bekeken-lijst {
    width: min(1020px, calc(100% - 24px));
    margin: 10px auto 0 auto;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    box-sizing: border-box;
}
.bekeken-leeg { padding: 24px 16px; font-size: 13px; color: #666; text-align: center; }

.bekeken-rij {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border-bottom: 1px solid #f1f5f9;
    min-height: 48px;
    box-sizing: border-box;
}
.bekeken-rij:last-child { border-bottom: none; }
.bekeken-rij:hover { background: #f8fafc; }

.bekeken-foto {
    width: 34px;
    height: auto;
    max-height: 48px;
    object-fit: contain;
    display: block;
    box-shadow: 0 2px 2px rgba(0,0,0,0.12);
}
.bekeken-tekst { min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; white-space: nowrap; }
.bekeken-titel { font-size: 13px; font-weight: 600; color: #1c2030; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.bekeken-meta { font-size: 11px; color: #666; overflow: hidden; text-overflow: ellipsis; flex: 0 10 auto; min-width: 0; }

.bekeken-personen { display: flex; align-items: center; gap: 6px; }
.bekeken-rij .avatar-icoon {
    width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover;
    filter: grayscale(100%); opacity: 0.5; transition: filter 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
}
.bekeken-rij .avatar-icoon.actief { filter: none; opacity: 1; }
.bekeken-ster svg { width: 15px; height: 15px; fill: #f59e0b; stroke: #f59e0b; stroke-width: 1.8; stroke-linejoin: round; display: block; }

.bekeken-datum { font-size: 11px; color: #94a3b8; white-space: nowrap; min-width: 78px; text-align: right; }
.bekeken-knoppen { display: flex; align-items: center; gap: 8px; }
.bekeken-rij .js-icon-edit, .bekeken-rij .js-bekeken-terug { cursor: pointer; }
.bekeken-rij .js-bekeken-terug:hover { color: #16a34a; transform: scale(1.12); }
.bekeken-rij .js-bekeken-uit { cursor: pointer; color: #64748b; }
.bekeken-rij .js-bekeken-uit svg { stroke-width: 2.6; }
.bekeken-rij .js-bekeken-uit:hover { color: #94a3b8; transform: scale(1.12); }
/* Waar staat hij, als gewone tekst achter de meta-regel: "• In verzameling • Gameroom" of "• Weggedaan".
   (Locatie alleen als die er is.) Op mobiel een eigen regeltje, zonder het eerste bolletje. */
.bekeken-status { font-size: 11px; color: #666; flex: 0 0 auto; margin-left: -4px; }
.bekeken-foto { cursor: zoom-in; }

/* Foto groot bekijken (klik op fotootje in Mijn bekeken). Klik ergens (ook op de foto) of Esc sluit. */
#foto-vergroting {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, 0.6);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
#foto-vergroting.open { display: flex; }
#foto-vergroting img {
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
    background: #fff;
}

/* Rechterkant van de knoppenbalk onder het formulier (prullenbak). De vroegere knop "Weggedaan" (archiefdoosje, klasse
   btn-bekeken) is in v5.9.144 vervallen: de prullenbak is nu de enige ingang. Code om terug te zetten: ARCHIEF.md. */
.formulier-rechts { display: flex; align-items: center; gap: 0; }

@media (max-width: 768px) {
    .bekeken-lijst { width: 100% !important; margin-top: 10px; }
    .bekeken-rij { grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 8px; padding: 6px 12px; }
    .bekeken-datum { display: none; }   /* op een telefoon te weinig ruimte; datum staat in het bewerkformulier niet, wel bij sorteren "Recent" */
    .bekeken-tekst { flex-direction: column; align-items: flex-start; gap: 1px; }
    .bekeken-titel { font-size: 13px; max-width: 100%; }
    .bekeken-meta { font-size: 11px; max-width: 100%; }
    .bekeken-status { margin-left: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .bekeken-punt { display: none; }
    .bekeken-foto { width: 30px; }
    /* onderbalk heeft nu 5 knoppen */
    .navbalk-knop { font-size: 9.5px; }
    /* Zonder Bekeken zijn het weer 4 knoppen: terug naar de normale lettergrootte. */
    body.bekeken-menu-uit .navbalk-knop { font-size: 10px; }
}

/* ============================================================
   INLOG-POORT (blokkeert de hele site tot iemand is ingelogd én toegestaan is)
   ============================================================ */
#login-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-gate-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px 32px;
    width: 320px;
    max-width: 90%;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.login-gate-logo {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 24px;
}

#login-gate-knop { width: 100%; }

#login-gate-fout {
    margin-top: 16px;
    color: #d6414f;
    font-size: 13px;
}

#login-gate-laden {
    margin-top: 8px;
    color: #666;
    font-size: 13px;
}

/* Profiel-badge (desktop + mobiel): rond, gevuld met de echte Google-profielfoto zodra ingelogd. */
/* Desktop: login-knop/badge wisselen op basis van of er is ingelogd (auth.js zet de klasse
   'is-ingelogd' op body zodra dat zo is). Op mobiel regelt de mobiele media query dit apart. */
#desktop-profiel-badge { display: none; }
body.is-ingelogd #desktop-login-btn { display: none !important; }
body.is-ingelogd #desktop-profiel-badge { display: flex; }

#desktop-profiel-badge, #mobiel-profiel-badge {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

/* Desktop-header: "+ Item" en de profiel-badge zijn even groot als de filtervelden eronder (30px, 12px tekst),
   zodat ze rustiger ogen; de zoekbalk en de tabs blijven 35px. "+ Item" is het eerste kind van .header-knoppen.
   Op mobiel is "+ Item" verborgen en heeft de mobiele badge/login-knop eigen afmetingen. */
.header-knoppen > .main-btn:first-child { height: 30px; padding: 0 11px; font-size: 13px; }
.header-knoppen #desktop-profiel-badge { width: 30px; height: 30px; }
/* Klikbaar-signaal: lichte zoom (zoals bij de andere klikbare icoontjes). Alleen op apparaten mét hover,
   anders blijft de zoom op een touchscreen "plakken" na een tik. */
@media (hover: hover) {
    #desktop-profiel-badge:hover, #mobiel-profiel-badge:hover { transform: scale(1.12); }
}
#desktop-profiel-badge img, #mobiel-profiel-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== Compact formulier bij status "alleen Bekeken" (v5.9.138, zie zetFormulierAlleenBekeken in app.js) =====
   !important is hier nodig: deze onderdelen krijgen elders via JS een inline display (open/dicht klappen); in deze
   stand moeten ze altijd verborgen resp. zichtbaar zijn. Buiten .alleen-bekeken hebben deze regels geen effect. */
#actie-paneel.alleen-bekeken .verberg-bij-bekeken { display: none !important; }
#actie-paneel.alleen-bekeken #secundaire-velden-groep { display: block !important; }   /* sorteertitel/speelduur/jaar altijd zichtbaar */
/* Foto-URL direct open (geen "Foto's beheren"), zonder grijze achtergrond en uitgelijnd met de andere velden;
   kopje in dezelfde stijl als "Gezien met:" (v5.9.141). */
#actie-paneel.alleen-bekeken #fotos-uitklapbaar { display: block !important; background: none !important; padding: 0 !important; font-size: inherit !important; }
#actie-paneel.alleen-bekeken #fotos-uitklapbaar label { font-size: 12px; color: #64748b; }
/* Favoriet op de plek van Label: halve breedte, verticaal gecentreerd, links gelijk met het veld erboven. */
#actie-paneel.alleen-bekeken .dubbel-veld > .checkbox-wrapper { width: 50%; box-sizing: border-box; padding-left: 0; }

/* ===== Aantal-rij op desktop compacter (v5.9.145, wens Vincent) =====
   De rij met "X van de Y items" en de icoontjes (weergave, sorteren) had 8px marge erboven en 10px eronder: samen met de
   30px hoge rij zat er rond de tekst 16px boven en 18px onder. Nu 4px en 4px: rond de tekst 12px boven en 12px onder (rond de
   icoontjes 10px / 10px). De hoogte van de rij zelf (30px) blijft. Het gaat om dezelfde marges als in de basisregels
   (#aantal-teller, .fotomuur, .bekeken-lijst); de fotomuur en de Bekeken-lijst moeten gelijk blijven. Alleen desktop:
   mobiel (max-width 768px) heeft een eigen opbouw en houdt de oude marges. Terugdraaien = dit blok weghalen. */
@media (min-width: 769px) {
    #aantal-teller { margin-top: 4px; }
    .fotomuur, .bekeken-lijst { margin-top: 4px; }
}

/* ===== Bevestig-venster: knoppenrij en "keuzestand" (v5.9.146, wens Vincent: clean, weinig tekst, goede uitlijning) =====
   De knoppenrij stond eerst als inline stijl in index.html; hier als klasse, ongewijzigd voor de gewone vragen (Niet bekeken?, ...).
   Keuzestand (alleen de prullenbak, via de optie "hint"): knoppen even breed op één rij; klein "Weg is weg" onder Weggooien.
   Met 3 knoppen (Naar bekeken · Weggooien · Annuleren) staat de hint onder de middelste, met 2 (Weggooien · Annuleren) onder de eerste.
   Op smalle schermen (< 380px) komen de 3 knoppen onder elkaar (de hint dan onder Weggooien), zodat de tekst op elke telefoon, ook met
   een iets bredere letter, ruim past en precies in het midden van de knop staat. */
.bevestig-knoppen { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.bevestig-hint { display: none; }
.bevestig-knoppen.keuze { display: grid; grid-template-columns: repeat(2, minmax(0, 120px)); justify-content: center; gap: 8px; margin-top: 18px; }
.bevestig-knoppen.keuze-3 { grid-template-columns: repeat(3, minmax(0, 104px)); }
.bevestig-knoppen.keuze button { width: 100%; padding-left: 4px; padding-right: 4px; }
.bevestig-knoppen.keuze .bevestig-hint { display: block; grid-row: 2; grid-column: 1; margin-top: 2px; font-size: 12px; line-height: 1.3; color: #94a3b8; text-align: center; }
.bevestig-knoppen.keuze-3 .bevestig-hint { grid-column: 2; }
@media (max-width: 379px) {
    .bevestig-knoppen.keuze-3 { grid-template-columns: minmax(0, 1fr); }
    .bevestig-knoppen.keuze-3 .bevestig-hint { grid-row: 3; grid-column: 1; }
    .bevestig-knoppen.keuze-3 .annuleer-btn { grid-row: 4; }
}