.sp-display-player { position:relative; margin:16px auto 24px; max-width:1200px; width:100%; scroll-margin-top:12px; background:#eaf1e7; border:1px solid #c6d7c8; border-radius:18px; overflow:hidden; }
.sp-display-toolbar { box-sizing:border-box; display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px; margin:0; background:#f4f7f2; border-bottom:1px solid #c6d7c8; }
.sp-display-toolbar button { box-sizing:border-box; margin:0; min-height:44px; padding:9px 15px; border:1px solid #90ae93; border-radius:9px; color:#234e38; background:#fff; font:700 16px/1.25 Arial,sans-serif; cursor:pointer; touch-action:manipulation; }
.sp-display-toolbar button:hover { background:#e0eddf; }
.sp-display-toolbar button:focus-visible, .sp-display-dialog button:focus-visible { outline:3px solid #183e75; outline-offset:2px; }
.sp-display-toolbar .sp-display-fullscreen { margin-left:auto; color:#fff; background:#286d54; border-color:#286d54; }
.sp-display-player > iframe.sp-display-frame { display:block!important; width:100%!important; height:var(--sp-frame-height)!important; min-height:0!important; border:0!important; border-radius:0!important; }
.sp-display-player:fullscreen, .sp-display-player.sp-display-expanded { box-sizing:border-box; width:100%!important; max-width:none!important; height:100dvh!important; margin:0!important; border-radius:0!important; border:0!important; overflow:auto!important; background:#eaf1e7!important; }
.sp-display-player.sp-display-expanded { position:fixed!important; inset:0!important; z-index:2147483000!important; }
.sp-display-lock { overflow:hidden!important; }
.sp-display-dialog { box-sizing:border-box; width:min(640px,calc(100% - 24px)); max-height:calc(100dvh - 24px); margin:auto; padding:22px; overflow:auto; border:1px solid #91ac96; border-radius:18px; background:#fffdf3; color:#253e30; font:18px/1.6 Arial,sans-serif; }
.sp-display-dialog::backdrop { background:#102c22b3; }
.sp-display-dialog h2 { font-size:25px; line-height:1.2; margin:0 0 14px; }
.sp-display-dialog p { margin:0 0 16px; }
.sp-display-dialog button { min-height:44px; padding:10px 18px; background:#286d54; color:#fff; border:1px solid #286d54; border-radius:9px; cursor:pointer; font:700 17px Arial,sans-serif; }
.sp-display-dialog form { position:sticky; bottom:-22px; background:#fffdf3; padding:12px 0 18px; margin:0; }
.sp-display-dialog .toolbar { display:flex; flex-wrap:wrap; gap:10px; }
.sp-display-dialog select { max-width:100%; width:100%; min-height:44px; font:17px Arial,sans-serif; }
@media(max-width:600px) { .sp-display-player { border-radius:12px; } .sp-display-toolbar { gap:6px; padding:7px; } .sp-display-toolbar button { font-size:15px; padding:8px 10px; } }
@media(max-width:600px) { .sp-display-toolbar .sp-display-fit { display:none; } }
/* Groot speelvenster: binnen de browser, met een kleine rand rondom. */
.sp-display-player.sp-display-expanded { inset:8px!important; width:calc(100% - 16px)!important; height:calc(100dvh - 16px)!important; border:1px solid #8fa58c!important; border-radius:14px!important; overflow:hidden!important; box-shadow:0 0 0 100vmax #163427cc!important; }
.sp-display-toolbar { padding:6px 10px; flex-wrap:nowrap; }
.sp-display-player.sp-display-expanded .sp-display-toolbar .sp-display-fullscreen { background:#fff; color:#234e38; }
.sp-display-toolbar [hidden] { display:none!important; }
@media(max-width:600px) { .sp-display-player.sp-display-expanded { inset:3px!important; width:calc(100% - 6px)!important; height:calc(100dvh - 6px)!important; border-radius:10px!important; } .sp-display-toolbar { padding:5px; gap:5px; flex-wrap:wrap; } .sp-display-toolbar button { padding:7px 9px; font-size:15px; } }

/* Een vaste teruglink naar het overzicht, los van de grootte van het speelvenster. */
.sp-display-toolbar .sp-display-back{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 15px;border:1px solid #90ae93;border-radius:9px;color:#234e38;background:#fff;font:700 16px/1.25 Arial,sans-serif;text-decoration:none;text-align:center;line-height:1.25}
.sp-display-toolbar .sp-display-back:hover{background:#e0eddf}
.sp-display-toolbar .sp-display-back:focus-visible{outline:3px solid #183e75;outline-offset:2px}
@media(max-width:600px){.sp-display-toolbar .sp-display-back{font-size:15px;padding:7px 9px}}