.movie-trailer-trigger { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 18px; border:1px solid #7689ad; border-radius:12px; background:#172e50; color:#fff; font:inherit; font-weight:600; cursor:pointer; }
.movie-trailer-trigger svg { flex-shrink:0; }
.movie-info > .movie-trailer-trigger { margin-bottom:16px; }
.movie-trailer-trigger:hover { background:#24456e; color:#fff; }
.ts-top-movies .ts-top-movie { position:relative; }
.ts-top-movie__link { display:block; color:inherit; text-decoration:none; border-radius:12px; }
.ts-top-movies .movie-trailer-trigger--card { position:absolute; top:10px; right:10px; left:auto; z-index:2; display:grid; place-items:center; width:48px; min-width:48px; max-width:48px; height:48px; min-height:48px; padding:0; border:1px solid #ffffffa6; border-radius:50%; background:#08162bd9; color:#fff; box-shadow:0 4px 14px #0004,inset 0 1px 0 #ffffff1a; backdrop-filter:blur(8px); transition:background .15s,border-color .15s; }
.movie-trailer-trigger--card > svg { width:22px; height:22px; transform:translateX(1px); }
.movie-trailer-trigger--card > span { position:absolute; right:calc(100% + 8px); width:max-content; padding:7px 10px; border-radius:8px; background:#08162bf2; color:#fff; font-size:12px; font-weight:600; line-height:1.3; white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; }
.ts-top-movies .movie-trailer-trigger--card:hover,.ts-top-movies .movie-trailer-trigger--card:focus-visible { background:#263f66f2; border-color:#fff; }
.movie-trailer-trigger--card:focus-visible > span { opacity:1; visibility:visible; }
@media(hover:hover) and (pointer:fine) { .movie-trailer-trigger--card:hover > span { opacity:1; visibility:visible; } }
.movie-trailer-dialog { width:min(960px,calc(100% - 24px)); max-width:none; max-height:calc(100dvh - 24px); padding:0; margin:auto; border:1px solid #677e9f; border-radius:18px; background:#10203a; color:#f4f7fb; overflow:auto; box-shadow:0 24px 80px #0008; }
.movie-trailer-dialog::backdrop { background:#020916cc; }
.movie-trailer-dialog__header { display:flex; align-items:center; gap:16px; padding:12px 16px; }
.movie-trailer-dialog__header h2 { flex:1; min-width:0; margin:0; color:inherit; font-size:clamp(16px,2vw,22px); line-height:1.4; overflow-wrap:anywhere; }
.movie-trailer-close { display:grid; place-items:center; flex-shrink:0; width:48px; height:48px; padding:0; border:1px solid #8197b7; border-radius:12px; background:#203855; color:inherit; cursor:pointer; }
.movie-trailer-player { aspect-ratio:16/9; max-height:calc(100dvh - 164px); background:#000; }
.movie-trailer-player :is(iframe,video) { display:block; width:100%; height:100%; border:0; }
.movie-trailer-dialog__footer { display:flex; justify-content:flex-end; padding:8px 16px; }
.movie-trailer-dialog__footer a { display:inline-flex; align-items:center; min-height:44px; color:#d3e0ff; text-decoration:underline; }
.movie-trailer-error { padding:0 16px; color:inherit; }
.movie-trailer-error[hidden] { display:none; }
.movie-trailer-trigger:focus-visible,.movie-trailer-dialog :focus-visible,.ts-top-movie__link:focus-visible { outline:3px solid #8b7eff; outline-offset:3px; }
html.white-mode .movie-trailer-trigger:not(.movie-trailer-trigger--card) { background:#eef2fc; color:#243d63; border-color:#8d9fb9; }
html.white-mode .movie-trailer-dialog { background:#fff; color:#18283e; border-color:#b3bfd1; }
html.white-mode .movie-trailer-close { background:#eef2f8; border-color:#93a5bd; }
html.white-mode .movie-trailer-dialog__footer a { color:#254daf; }
@media(max-width:600px) { .movie-trailer-dialog { border-radius:14px; } .movie-trailer-dialog__header { padding:8px 10px; gap:10px; } .ts-top-movies .movie-trailer-trigger--card { top:8px; right:8px; } }
@media(prefers-reduced-motion:reduce) { .movie-trailer-trigger--card { transition:none !important; } }