.film-preview {position:relative;background:#15222b url('assets/films/hirental-feature-overview.webp?v=a59504535fed') center/contain no-repeat;aspect-ratio:16/9}
.film-preview #package-film {height:100%;width:100%;object-fit:contain}
.film-start {text-decoration:none;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#10192340;color:#fff7ed;cursor:pointer;font:inherit}
.film-start>span {display:grid;place-items:center;width:80px;height:80px;border-radius:50%;background:#f2b491;color:#263b4a;font-size:28px;padding-left:4px;box-shadow:0 8px 30px #0005}
.film-start>strong {font-size:19px;background:#15222be6;padding:8px 16px;border-radius:5px}.film-start:hover>span{background:#ffd1b3}.film-start:focus-visible{outline:3px solid #f2b491;outline-offset:-5px}
#film-dialog {inset:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;padding:58px 14px 72px;border:0;box-sizing:border-box;background:#101923;color:#fff7ed;overflow:hidden}
#film-dialog::backdrop {background:#101923}
#film-player-slot {width:100%;height:100%}
#film-dialog #package-film {display:block;width:100%;height:100%;max-height:none;object-fit:contain;background:#101923}
#film-close {position:absolute;right:max(12px,env(safe-area-inset-right));top:max(7px,env(safe-area-inset-top));width:44px;height:44px;border:1px solid #687580;border-radius:50%;background:#263b4a;color:#fff7ed;font-size:32px;line-height:1;cursor:pointer}
#film-close:hover {background:#405468}#film-close:focus-visible{outline:3px solid #f2b491;outline-offset:3px}
html:has(#film-dialog[open]) {overflow:hidden;scroll-snap-type:none}
@media(max-width:720px){.film-start>span{width:62px;height:62px;font-size:23px}#film-dialog{padding:calc(58px + env(safe-area-inset-top)) 6px calc(98px + env(safe-area-inset-bottom))}}

.film-controls {position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:14px;right:14px;display:flex;align-items:center;gap:14px;padding:10px;background:#263b4a;border-radius:7px;color:#fff7ed}
.film-controls button {font:inherit;font-size:14px;white-space:nowrap;border:1px solid #748390;border-radius:4px;padding:6px 12px;background:#334c5e;color:inherit;min-height:40px}
.film-controls button:hover {background:#486176}
.film-controls input {flex:1;min-width:60px;accent-color:#f2b491;cursor:pointer;height:36px}
#film-time {font-variant-numeric:tabular-nums;white-space:nowrap;font-size:14px}
@media(max-width:540px) {.film-controls {gap:8px;flex-wrap:wrap}.film-controls input {order:5;flex-basis:100%;height:22px}.film-controls button {padding:6px 9px}#film-time {margin-right:auto}}

.short-films {padding:20px;background:#fbf6ee;color:#243849;border-top:1px solid #d4c8b9}
.short-films h3 {margin:0 0 12px;font-size:clamp(19px,2vw,25px)}
.short-film-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.short-film-grid a {display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #cfc3b3;border-radius:5px;background:#fffdf7;color:#263949;font-size:15px;font-weight:550;line-height:1.3;text-decoration:none}
.short-film-grid a:hover,.short-film-grid a:focus-visible {border-color:#935631;background:#f9e5d8}
.short-film-grid small {margin-left:auto;font-variant-numeric:tabular-nums}
.clip-play {color:#a55736;font-size:13px}
@media(max-width:950px){.short-film-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.short-film-grid{grid-template-columns:1fr}.short-films{padding:15px}}