/* Emshow VOD UI kit — RTL-first. Import ../../tokens/tokens.css first. Uses logical properties (inline-start/end). */
.vk{font-family:var(--vk-font);direction:rtl;color:var(--vk-text);background:var(--vk-bg);line-height:1.6;-webkit-font-smoothing:antialiased}
.vk *{box-sizing:border-box}
.vk-icon{width:var(--vk-size-icon);height:var(--vk-size-icon);display:inline-block;flex:none}
.vk-icon--flip{transform:scaleX(-1)} /* direction-sensitive icons in RTL (back/forward/seek NOT flipped: media timeline stays LTR) */
/* Buttons */
.vk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding-inline:20px;border-radius:var(--vk-radius-md);border:0;font:700 var(--vk-fs-md)/1 var(--vk-font);cursor:pointer;transition:transform var(--vk-motion-fast),background var(--vk-motion-base),box-shadow var(--vk-motion-base);color:var(--vk-text);background:var(--vk-surface2)}
.vk-btn--primary{background:var(--vk-primary);color:var(--vk-on-primary)}
.vk-btn--primary:hover{filter:brightness(1.1)}
.vk-btn--ghost{background:transparent;box-shadow:inset 0 0 0 1.5px var(--vk-border)}
.vk-btn--glass{background:rgba(255,255,255,.14);backdrop-filter:blur(12px);color:#fff}
.vk-btn--icon{width:44px;padding:0;border-radius:50%}
.vk-btn--sm{height:34px;padding-inline:14px;font-size:var(--vk-fs-sm)}
.vk-btn:disabled{opacity:.4;cursor:not-allowed}
/* Chips / badges */
.vk-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding-inline:16px;border-radius:var(--vk-radius-pill);background:var(--vk-surface2);color:var(--vk-text);font:500 var(--vk-fs-sm) var(--vk-font);border:1px solid var(--vk-border);cursor:pointer;white-space:nowrap}
.vk-chip[aria-pressed=true],.vk-chip--active{background:var(--vk-text);color:var(--vk-bg);border-color:transparent}
.vk-badge{display:inline-flex;align-items:center;height:20px;padding-inline:6px;border-radius:4px;font:900 11px/1 var(--vk-font);background:rgba(255,255,255,.16);color:#fff}
.vk-badge--age{background:var(--vk-warning);color:#111}.vk-badge--live{background:var(--vk-primary)}.vk-badge--vip{background:linear-gradient(135deg,#F5C451,#FF9F43);color:#111}
/* Top bar */
.vk-topbar{display:flex;align-items:center;gap:16px;height:64px;padding-inline:24px;position:sticky;top:0;z-index:10;background:linear-gradient(180deg,var(--vk-bg),transparent)}
.vk-topbar__logo{height:36px}.vk-topbar__nav{display:flex;gap:20px;font-weight:500}.vk-topbar__nav a{color:var(--vk-text-muted);text-decoration:none}.vk-topbar__nav a[aria-current]{color:var(--vk-text);font-weight:700}
.vk-topbar__actions{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
/* Search */
.vk-search{display:flex;align-items:center;gap:10px;height:48px;padding-inline:16px;border-radius:var(--vk-radius-pill);background:var(--vk-surface2);border:1px solid var(--vk-border);color:var(--vk-text-muted)}
.vk-search input{flex:1;background:none;border:0;outline:0;color:var(--vk-text);font:500 var(--vk-fs-md) var(--vk-font)}
.vk-search:focus-within{border-color:var(--vk-primary)}
/* Tabs */
.vk-tabs{display:flex;gap:24px;border-bottom:1px solid var(--vk-border)}
.vk-tab{padding-block:12px;background:none;border:0;color:var(--vk-text-muted);font:700 var(--vk-fs-md) var(--vk-font);cursor:pointer;position:relative}
.vk-tab[aria-selected=true]{color:var(--vk-text)}.vk-tab[aria-selected=true]::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:3px;border-radius:3px;background:var(--vk-primary)}
/* Poster card */
.vk-poster{width:var(--vk-size-poster-w);flex:none;cursor:pointer;transition:transform var(--vk-motion-base) var(--vk-motion-easing)}
.vk-poster__img{position:relative;aspect-ratio:2/3;border-radius:var(--vk-radius-md);overflow:hidden;background:var(--vk-surface2)}
.vk-poster__img img{width:100%;height:100%;object-fit:cover;display:block}
.vk-poster__badges{position:absolute;inset-block-start:8px;inset-inline-start:8px;display:flex;gap:4px}
.vk-poster__title{margin-top:8px;font-weight:700;font-size:var(--vk-fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vk-poster__meta{font-size:var(--vk-fs-xs);color:var(--vk-text-muted)}
.vk-poster:hover{transform:translateY(-4px)}
/* Continue watching */
.vk-cw{width:260px;flex:none}
.vk-cw__img{position:relative;aspect-ratio:16/9;border-radius:var(--vk-radius-md);overflow:hidden;background:var(--vk-surface2)}
.vk-cw__img img{width:100%;height:100%;object-fit:cover}
.vk-cw__play{position:absolute;inset:0;margin:auto;width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;color:#fff}
.vk-progress{height:4px;background:rgba(255,255,255,.25);border-radius:4px;overflow:hidden;direction:ltr}
.vk-progress>span{display:block;height:100%;background:var(--vk-progress);border-radius:4px}
.vk-cw .vk-progress{position:absolute;inset-inline:8px;bottom:8px}
.vk-cw__title{margin-top:8px;font-weight:700;font-size:var(--vk-fs-sm)}.vk-cw__meta{font-size:var(--vk-fs-xs);color:var(--vk-text-muted)}
/* Carousel row */
.vk-row{margin-block:24px}.vk-row__head{display:flex;align-items:center;justify-content:space-between;padding-inline:24px;margin-bottom:12px}
.vk-row__title{font-size:var(--vk-fs-lg);font-weight:900;margin:0}.vk-row__more{color:var(--vk-text-muted);font-size:var(--vk-fs-sm);display:flex;align-items:center;gap:2px;text-decoration:none}
.vk-row__track{display:flex;gap:12px;overflow-x:auto;padding-inline:24px;scroll-snap-type:x mandatory;scrollbar-width:none}
.vk-row__track>*{scroll-snap-align:start}
/* Hero */
.vk-hero{position:relative;min-height:520px;display:flex;align-items:flex-end;padding:48px 24px;overflow:hidden;isolation:isolate}
.vk-hero__bg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center}
.vk-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--vk-bg) 0%,transparent 55%),linear-gradient(270deg,rgba(8,10,16,.85) 0%,transparent 60%)}
.vk-hero__content{max-width:560px;color:#fff}
.vk-hero__title{font-size:var(--vk-fs-display);font-weight:900;line-height:1.2;margin:0 0 8px}
.vk-hero__meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--vk-fs-sm);color:#d7d9e0;margin-bottom:12px}
.vk-hero__desc{color:#d7d9e0;margin:0 0 20px}.vk-hero__actions{display:flex;gap:10px}
/* Episode item */
.vk-episode{display:flex;gap:14px;padding:12px;border-radius:var(--vk-radius-lg);align-items:center}
.vk-episode:hover{background:var(--vk-surface)}
.vk-episode__thumb{position:relative;width:160px;aspect-ratio:16/9;border-radius:var(--vk-radius-md);overflow:hidden;flex:none;background:var(--vk-surface2)}
.vk-episode__thumb img{width:100%;height:100%;object-fit:cover}.vk-episode__thumb .vk-progress{position:absolute;inset-inline:0;bottom:0;border-radius:0}
.vk-episode__body{flex:1;min-width:0}.vk-episode__title{font-weight:700;margin:0}.vk-episode__desc{font-size:var(--vk-fs-sm);color:var(--vk-text-muted);margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vk-episode__dl{color:var(--vk-text-muted)}
/* Player overlay — timeline is LTR even in RTL UI */
.vk-player{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--vk-radius-lg);overflow:hidden;color:#fff}
.vk-player__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.85}
.vk-player__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.7),transparent 25%,transparent 60%,rgba(0,0,0,.85))}
.vk-player__top{position:absolute;top:0;inset-inline:0;display:flex;align-items:center;gap:12px;padding:16px 20px}
.vk-player__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:48px;direction:ltr}
.vk-player__big{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);display:grid;place-items:center}
.vk-player__bottom{position:absolute;bottom:0;inset-inline:0;padding:16px 20px}
.vk-player__time{display:flex;align-items:center;gap:12px;direction:ltr;font-size:var(--vk-fs-sm);font-variant-numeric:tabular-nums}
.vk-player__time .vk-progress{flex:1;height:5px;position:relative;overflow:visible}
.vk-player__time .vk-progress i{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.vk-player__controls{display:flex;align-items:center;gap:8px;margin-top:10px}.vk-player__controls .sp{flex:1}
.vk-player__skip{position:absolute;inset-inline-start:20px;bottom:96px}
/* Bottom nav */
.vk-bottomnav{display:flex;height:var(--vk-size-tab-bar);background:var(--vk-surface);border-top:1px solid var(--vk-border);padding-bottom:env(safe-area-inset-bottom)}
.vk-bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;color:var(--vk-text-muted);text-decoration:none}
.vk-bottomnav a[aria-current]{color:var(--vk-primary);font-weight:700}
/* Plan cards */
.vk-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.vk-plan{position:relative;padding:24px;border-radius:var(--vk-radius-xl);background:var(--vk-surface);border:1.5px solid var(--vk-border)}
.vk-plan--featured{border-color:var(--vk-primary);background:linear-gradient(180deg,rgba(229,25,46,.14),var(--vk-surface) 60%)}
.vk-plan__tag{position:absolute;top:-12px;inset-inline-start:20px;background:var(--vk-primary);color:#fff;font-size:12px;font-weight:700;padding:2px 10px;border-radius:99px}
.vk-plan__name{font-weight:900;font-size:var(--vk-fs-lg);margin:0}.vk-plan__price{font-size:var(--vk-fs-xxl);font-weight:900;margin:8px 0}.vk-plan__price small{font-size:var(--vk-fs-sm);color:var(--vk-text-muted);font-weight:500}
.vk-plan ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px;font-size:var(--vk-fs-sm)}.vk-plan li{display:flex;gap:8px;align-items:center}.vk-plan li svg{color:var(--vk-success);width:18px;height:18px}
/* Profile picker */
.vk-profiles{display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
.vk-profile{display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;color:var(--vk-text-muted);font:500 var(--vk-fs-md) var(--vk-font);cursor:pointer}
.vk-profile__avatar{width:104px;height:104px;border-radius:var(--vk-radius-xl);display:grid;place-items:center;font-size:40px;font-weight:900;color:#fff;transition:transform var(--vk-motion-base),box-shadow var(--vk-motion-base);position:relative}
.vk-profile:hover .vk-profile__avatar,.vk-profile:focus-visible .vk-profile__avatar{box-shadow:0 0 0 3px var(--vk-focus);transform:scale(1.05)}
.vk-profile:hover,.vk-profile:focus-visible{color:var(--vk-text);outline:0}
.vk-profile__lock{position:absolute;bottom:-6px;inset-inline-end:-6px;background:var(--vk-surface3);border-radius:50%;width:30px;height:30px;display:grid;place-items:center}
.vk-profile--add .vk-profile__avatar{border:2px dashed var(--vk-border);color:var(--vk-text-muted)}
/* Skeleton */
.vk-skel{background:linear-gradient(90deg,var(--vk-surface2) 25%,var(--vk-surface3) 50%,var(--vk-surface2) 75%);background-size:200% 100%;animation:vk-shimmer 1.4s infinite linear;border-radius:var(--vk-radius-md)}
[dir=rtl] .vk-skel{animation-direction:reverse}
@keyframes vk-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.vk-skel{animation:none}}
/* Focus (keyboard + TV) */
.vk :focus-visible{outline:3px solid var(--vk-focus);outline-offset:3px;border-radius:var(--vk-radius-md)}
/* 10-foot TV mode: add .vk-tv on root */
.vk-tv{font-size:var(--vk-fs-tv-body)}
.vk-tv .vk-icon{width:var(--vk-size-icon-tv);height:var(--vk-size-icon-tv)}
.vk-tv .vk-poster{width:var(--vk-size-poster-tv-w)}
.vk-tv .vk-row__track,.vk-tv .vk-row__head{padding-inline:var(--vk-space-tv-safe)}
.vk-tv .vk-row__title{font-size:var(--vk-fs-tv-title)}
.vk-tv .vk-btn{height:64px;padding-inline:32px;font-size:var(--vk-fs-tv-body);border-radius:var(--vk-radius-lg)}
.vk-tv [data-focusable]{transition:transform var(--vk-motion-base) var(--vk-motion-easing),box-shadow var(--vk-motion-base);outline:0}
.vk-tv [data-focusable]:focus,.vk-tv [data-focusable].is-focused{transform:scale(var(--vk-size-focus-scale));box-shadow:var(--vk-shadow-focus);z-index:2;border-radius:var(--vk-radius-md)}
.vk-tv .vk-btn:focus,.vk-tv .vk-btn.is-focused{background:#fff;color:#111;transform:scale(1.06)}
.vk-tv .vk-poster[data-focusable].is-focused{box-shadow:none}.vk-tv .vk-poster.is-focused .vk-poster__img{box-shadow:var(--vk-shadow-focus)}
.vk-tv .vk-chip.is-focused{background:#fff;color:#111;transform:scale(1.06)}