/* Landing-page film controls (hpv.js): the /videoer/ set in a slim bar on the film itself, no separate footer. */
body#ss-shell .hpv{position:relative}
body#ss-shell .hpv-host{position:relative;border-radius:12px;overflow:hidden} /* /tilskud/: the film's own box for the bar */
/* The green pause button of every muted start (homepage, "Hjælp til det …", /enterprise/, /tilskud/): 44 px target, clear focus ring (PM) */
body#ss-shell :is(.hpc-preview-toggle,.en-film-toggle,.hpv-ptoggle):focus-visible{outline:none!important} /* one indicator: the round ring below, not also the site's square outline */
body#ss-shell :is(.hpc-preview-toggle,.en-film-toggle,.hpv-ptoggle):focus-visible span{box-shadow:0 0 0 2px #fff,0 0 0 4px #23352b}
/* /tilskud/: its film plays muted inside the picture card (under the card's gradient and words), same green pause button as the others */
body#ss-shell #ss-aid-concept .aid-film{position:relative}
body#ss-shell #ss-aid-concept .aid-film-trigger .hpv-aid-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;border-radius:0;opacity:0;transition:opacity .3s ease}
body#ss-shell #ss-aid-concept .aid-film-trigger .hpv-aid-preview.on{opacity:1}
body#ss-shell #ss-aid-concept .aid-film:has(> .hpv-ptoggle:not([hidden])) .aid-film-time{top:10px;bottom:auto} /* the length moves up, the pause button takes its corner */
body#ss-shell .hpv-ptoggle{position:absolute;bottom:6px;right:6px;z-index:5;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
body#ss-shell .hpv-ptoggle[hidden]{display:none}
body#ss-shell .hpv-ptoggle span{display:grid;place-items:center;width:32px;height:32px;border:1px solid #ffffff80;border-radius:50%;background:#23352bcc}
body#ss-shell .hpv-ptoggle svg{width:16px;height:16px}
body#ss-shell .hpv-ptoggle .hpc-preview-resume,body#ss-shell .hpv-ptoggle[aria-pressed="true"] .hpc-preview-pause{display:none}
body#ss-shell .hpv-ptoggle[aria-pressed="true"] .hpc-preview-resume{display:block}
body#ss-shell .hpv-ptoggle:hover span{background:#23352b}
body#ss-shell .hpv>.hpv-bar{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;justify-content:flex-end;padding:30px 8px 4px;background:linear-gradient(180deg,rgba(16,26,22,0) 0,rgba(16,26,22,.5) 45%,rgba(16,26,22,.8) 100%);color:#fff;font:inherit;font-size:13px;line-height:1;text-align:start;opacity:0;transition:opacity .2s ease;pointer-events:none}
body#ss-shell .hpv.hpv-on>.hpv-bar,body#ss-shell .hpv.hpv-paused>.hpv-bar,body#ss-shell .hpv>.hpv-bar:focus-within{opacity:1}
body#ss-shell .hpv>.hpv-bar>*{pointer-events:none}
body#ss-shell .hpv.hpv-on>.hpv-bar>*,body#ss-shell .hpv.hpv-paused>.hpv-bar>*,body#ss-shell .hpv>.hpv-bar:focus-within>*{pointer-events:auto}
body#ss-shell .hpv .hpv-top{display:flex;align-items:center;gap:8px;height:22px;padding:0 8px}
body#ss-shell .hpv .hpv-row{display:flex;align-items:center;gap:2px;height:44px}
body#ss-shell .hpv .hpv-btn,body#ss-shell .hpv .hpv-bar .hpc-cc{position:static;inset:auto;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:10px;background:transparent;color:#fff;opacity:1;cursor:pointer;transition:background-color .15s ease;-webkit-tap-highlight-color:transparent}
body#ss-shell .hpv .hpv-btn svg{display:block;width:24px;height:24px}
body#ss-shell .hpv .hpv-bar .hpc-cc svg{display:block;width:24px;height:22px;fill:currentColor}
/* No focus ring (owner rule for the subtitles switch): focus and hover show a light plate */
body#ss-shell .hpv .hpv-btn:hover,body#ss-shell .hpv .hpv-btn:focus-visible,body#ss-shell .hpv .hpv-btn[aria-expanded=true],body#ss-shell .hpv .hpv-bar .hpc-cc:hover,body#ss-shell .hpv .hpv-bar .hpc-cc:focus-visible{background:rgba(255,255,255,.18);outline:none}
body#ss-shell .hpv .hpv-btn:disabled{opacity:.45;cursor:default;background:transparent}
body#ss-shell .hpv .hpv-voice{width:auto;gap:2px;padding:0 6px 0 10px;font:inherit;font-size:13px;font-weight:600;white-space:nowrap}
body#ss-shell .hpv .hpv-voice svg{width:18px;height:18px}
body#ss-shell .hpv .hpv-time{padding:0 8px;font-size:13px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
body#ss-shell .hpv .hpv-time-top{display:none;padding:0 0 0 2px}
body#ss-shell .hpv .hpv-space{flex:1 1 auto;min-width:0}
body#ss-shell .hpv :is(.hpv-seek,.hpv-vol){-webkit-appearance:none;appearance:none;height:22px;margin:0;padding:0;background:transparent;cursor:pointer;--hpv-p:0%}
body#ss-shell .hpv .hpv-seek{flex:1 1 auto;min-width:0}
body#ss-shell .hpv .hpv-vol{flex:0 0 72px;width:72px;margin-right:4px}
body#ss-shell .hpv :is(.hpv-seek,.hpv-vol)::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,#fff var(--hpv-p),rgba(255,255,255,.35) var(--hpv-p))}
body#ss-shell .hpv :is(.hpv-seek,.hpv-vol)::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:#fff}
body#ss-shell .hpv :is(.hpv-seek,.hpv-vol)::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
body#ss-shell .hpv :is(.hpv-seek,.hpv-vol)::-moz-range-progress{height:4px;border-radius:2px;background:#fff}
body#ss-shell .hpv :is(.hpv-seek,.hpv-vol)::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff}
body#ss-shell .hpv :is(.hpv-seek,.hpv-vol):focus-visible{outline:none}
body#ss-shell .hpv :is(.hpv-seek,.hpv-vol):focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(255,255,255,.35)}
body#ss-shell .hpv :is(.hpv-seek,.hpv-vol):disabled{cursor:default;opacity:.6}
/* settings + voice menus */
body#ss-shell .hpv .hpv-menu{position:absolute;bottom:72px;right:8px;z-index:6;min-width:200px;max-width:calc(100% - 16px);padding:12px 12px 10px;border-radius:12px;background:rgba(24,34,31,.97);color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.35);text-align:start}
body#ss-shell .hpv .hpv-voice-menu{right:auto;left:8px}
body#ss-shell .hpv .hpv-menu[hidden]{display:none}
body#ss-shell .hpv .hpv-group+.hpv-group{margin-top:12px}
body#ss-shell .hpv .hpv-group p{margin:0 0 7px;font-size:12px;font-weight:600;line-height:1.3;color:rgba(255,255,255,.78)}
body#ss-shell .hpv .hpv-chips{display:flex;flex-wrap:wrap;gap:6px}
body#ss-shell .hpv .hpv-chip{min-width:44px;height:34px;margin:0;padding:0 11px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer}
body#ss-shell .hpv .hpv-chip:hover,body#ss-shell .hpv .hpv-chip:focus-visible{border-color:#fff;outline:none}
body#ss-shell .hpv .hpv-chip[aria-checked=true]{border-color:#fff;background:#fff;color:#1d2a26}
/* subtitles move above the bar while it shows (Chrome, Edge, Safari; hpv.js covers the others) */
body#ss-shell .hpv video::-webkit-media-text-track-container{transition:transform .2s ease}
body#ss-shell .hpv:is(.hpv-on,.hpv-paused) video::-webkit-media-text-track-container{transform:translateY(calc(-1 * var(--hpv-lift,0px)))}
/* larger subtitles (the /videoer/ "Større") */
body#ss-shell .hpv.hpv-cap-large video::cue{font-size:var(--hpv-cue-large,1.4em)}
body#ss-shell .hpv .hpv-menu>.hpv-close{position:absolute;top:4px;inset-inline-end:4px;width:32px;height:32px;border-radius:8px}
body#ss-shell .hpv .hpv-menu>.hpv-close svg{width:18px;height:18px}
body#ss-shell .hpv .hpv-menu>.hpv-close+.hpv-group>p{padding-inline-end:30px}
/* narrow films (phones): time and the voice button above the buttons (hpv.js moves the voice button), no volume slider;
   on touch phones no mute button either (the phone's own volume keys do it); 40 px buttons on the smallest phones;
   menus cover the small film (with their close button) instead of sticking out of it */
body#ss-shell .hpv.hpv-narrow>.hpv-bar{padding:18px 4px 2px}
body#ss-shell .hpv.hpv-narrow .hpv-row{gap:0}
body#ss-shell .hpv.hpv-narrow .hpv-top{height:auto;min-height:22px}
body#ss-shell .hpv.hpv-narrow .hpv-time-top{display:inline}
body#ss-shell .hpv.hpv-narrow :is(.hpv-time-row,.hpv-vol){display:none}
body#ss-shell .hpv .hpv-top .hpv-voice{height:30px;padding:0 4px 0 8px;border-radius:8px;font-size:12px}
body#ss-shell .hpv .hpv-top .hpv-voice svg{width:14px;height:14px}
body#ss-shell .hpv.hpv-narrow .hpv-menu{position:absolute;top:6px;bottom:6px;left:6px;right:6px;min-width:0;max-width:none;overflow:auto}
body#ss-shell .hpv.hpv-narrow .hpv-bar:has(.hpv-menu:not([hidden])){top:0;padding-top:0}
@media (pointer:coarse){body#ss-shell .hpv .hpv-btn,body#ss-shell .hpv .hpv-bar .hpc-cc{width:44px;height:44px}body#ss-shell .hpv .hpv-voice{width:auto}body#ss-shell .hpv .hpv-vol,body#ss-shell .hpv.hpv-narrow .hpv-mute{display:none}}
body#ss-shell .hpv.hpv-tiny .hpv-row>:is(.hpv-btn,.hpc-cc){width:40px}
/* full screen: the film and its bar fill the screen */
body#ss-shell .hpv:fullscreen{width:100vw;height:100vh;max-width:none;max-height:none;aspect-ratio:auto;margin:0;padding:0;border:0;border-radius:0;background:#000;box-shadow:none}
body#ss-shell .hpv:-webkit-full-screen{width:100vw;height:100vh;max-width:none;max-height:none;aspect-ratio:auto;margin:0;padding:0;border:0;border-radius:0;background:#000;box-shadow:none}
body#ss-shell .hpv:fullscreen>video{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;object-fit:contain;background:#000}
body#ss-shell .hpv:-webkit-full-screen>video{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;object-fit:contain;background:#000}