/* ============================================================================
   view-video-v2.css - public video view v2
   Loaded only by view_video_v2.tpl, after v2.css.
   ============================================================================ */

.v2-video-page{min-height:70vh;background:var(--v2-ground)}
.v2-video-shell{padding-top:36px;padding-bottom:64px}
.v2-video-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.v2-video-primary{min-width:0}
.v2-video-view{display:block;min-width:0}

.v2-video-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin:0 0 18px}
.v2-video-head h1{width:100%;margin:0;font-family:var(--v2-display);font-size:clamp(30px,4vw,46px);font-weight:500;line-height:1.12;letter-spacing:-.01em;color:var(--v2-ink)}
.v2-video-head .count-item{display:inline-flex;align-items:center;gap:6px;color:var(--v2-muted);font-size:14px}
.v2-video-head .count-item i{font-style:normal}
.v2-video-head .svg-icon{width:16px;height:16px;fill:currentColor}
.v2-video-access{position:absolute;top:14px;left:14px;z-index:4;display:inline-flex;align-items:center;pointer-events:none}
.v2-video-access-badge{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:5px 10px;border:1px solid var(--v2-line);border-radius:999px;font-size:13px;font-weight:700;line-height:1}
.v2-video-access-badge.premium{background:var(--v2-gold);border-color:var(--v2-gold);color:#1d1206}
.v2-video-access-badge.tokens{background:var(--v2-gold-soft);border-color:var(--v2-gold-dim);color:var(--v2-gold)}
.v2-video-access-badge.free{background:var(--v2-raised);color:var(--v2-ink)}
.v2-video-access-badge .svg-icon{width:15px;height:15px;fill:currentColor}
.v2-video-player.is-playing .v2-video-access{opacity:0;visibility:hidden}

.v2-video-player{margin:0;overflow:hidden;border:1px solid var(--v2-line);border-radius:var(--v2-r-lg);background:#080406}
.v2-video-player-frame{position:relative;overflow:hidden;background:#080406}
.v2-video-player-frame .player-wrap{height:auto!important;padding-bottom:0!important;aspect-ratio:16 / 9}
.v2-video-player-frame .player-wrap #kt_player{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.v2-video-player img{width:100%;height:100%;object-fit:cover}
.v2-video-player .no-player{position:relative;overflow:hidden;background:#080406!important}
.v2-video-player .no-player::after{background:rgba(10,4,7,.72)}
.v2-video-player .no-player .message{z-index:2;width:min(620px,calc(100% - 32px));padding:24px;border:1px solid var(--v2-line);border-radius:var(--v2-r-md);background:rgba(37,17,25,.94);color:var(--v2-ink);font-size:16px;line-height:1.55}
.v2-video-player .no-player .message a{color:var(--v2-gold)}
.v2-video-player .no-player .message form{margin-top:16px}
.v2-video-player .no-player .message .button{min-height:44px;border:0;border-radius:var(--v2-r-sm);background:var(--v2-gold);color:#1d1206;font-family:var(--v2-body);font-size:16px;font-weight:700}
.v2-video-player .no-player .message .button:hover{background:var(--v2-gold-hi);color:#1d1206}
.v2-video-player .no-player .message form+form{margin-top:10px}
.v2-video-player .no-player .message .button.v2-gate-alt{background:transparent;border:1px solid var(--v2-gold-dim);color:var(--v2-gold)}
.v2-video-player .no-player .message .button.v2-gate-alt:hover{background:var(--v2-gold-soft);color:var(--v2-gold)}

.v2-video-view .link-offer{margin:16px 0 0;overflow:hidden;border-radius:var(--v2-r-md)}
.v2-video-view .link-offer img{margin:auto}
.v2-video-view .video-controls{display:flex;justify-content:space-between;gap:16px;margin:18px 0 0;padding:16px;border:1px solid var(--v2-line);border-radius:var(--v2-r-md);background:var(--v2-surface)}
.v2-video-view .video-controls .col{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.v2-video-view .video-controls .button,
.v2-video-view .video-controls .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 12px;border:1px solid var(--v2-line);border-radius:var(--v2-r-sm);background:transparent;color:var(--v2-muted);font-family:var(--v2-body);font-weight:600}
.v2-video-view .video-controls .button:hover,
.v2-video-view .video-controls .button.active{border-color:var(--v2-magenta-line);background:var(--v2-raised);color:var(--v2-ink)}
.v2-video-view .video-controls .rate-like.is-liked,
.v2-video-view .video-controls .rate-like.is-liked:hover{border-color:var(--v2-magenta-line);background:var(--v2-raised);color:var(--v2-ink);cursor:default}
.v2-video-view .voters:empty{display:none}
.v2-video-view .video-controls .svg-icon{width:18px;height:18px;fill:currentColor}
.v2-video-view .rate-dislike .svg-icon{transform:rotate(180deg)}
.v2-video-view .btn-favourites{display:flex;list-style:none;gap:8px;margin:0;padding:0}
.v2-video-view .btn-holder{position:relative}
.v2-video-view .fav-drop{border:1px solid var(--v2-line);border-radius:var(--v2-r-sm);background:var(--v2-raised);color:var(--v2-ink)}

.v2-video-view .top-options{margin-top:16px}
.v2-video-view .buttons-row{display:flex;flex-wrap:wrap;gap:8px}
.v2-video-view .buttons-row .button{display:inline-flex;align-items:center;min-height:36px;padding:7px 12px;border:1px solid var(--v2-line);border-radius:var(--v2-r-sm);background:var(--v2-surface);color:var(--v2-muted);font-size:14px}
.v2-video-view .buttons-row .button:hover{border-color:var(--v2-magenta-line);color:var(--v2-ink)}

.v2-video-view .block-tabs{margin-top:20px;border:1px solid var(--v2-line);border-radius:var(--v2-r-lg);background:var(--v2-surface)}
.v2-video-view .v2-video-tabs-no-description:not(.is-open){display:none}
.v2-video-view .tab-content{padding:24px;color:var(--v2-muted);font-size:16px;line-height:1.7}
.v2-video-view .description{overflow-wrap:anywhere}
.v2-video-view .block-screenshots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v2-video-view .screen-img{display:block;overflow:hidden;border-radius:var(--v2-r-sm);background:var(--v2-raised)}
.v2-video-view .screen-img img{width:100%;height:auto}
.v2-video-view .contact-box .row{margin:0 0 18px}
.v2-video-view .contact-box .name{display:block;margin:0 0 7px;color:var(--v2-ink);font-size:14px;font-weight:600}
.v2-video-view .contact-box .textarea,
.v2-video-view .contact-box .textfield{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--v2-line);border-radius:var(--v2-r-sm);background:var(--v2-ground);color:var(--v2-ink);font-family:var(--v2-body);font-size:16px}
.v2-video-view .contact-box textarea.textarea{min-height:128px;resize:vertical}
.v2-video-view .contact-box .btn{min-height:44px;padding:10px 18px;border:0;border-radius:var(--v2-r-sm);background:var(--v2-magenta);color:#fff;font-family:var(--v2-body);font-size:16px;font-weight:700}
.v2-video-view .contact-box .btn:hover{background:var(--v2-magenta-hi)}

.v2-video-ad-rail{min-width:0}
.v2-video-ad-panel{position:sticky;top:88px;padding:18px;border:1px solid var(--v2-line);border-radius:var(--v2-r-md);background:var(--v2-surface)}
.v2-video-ad-label{margin:0 0 14px;color:var(--v2-muted);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.v2-video-ad-pair{display:grid;gap:12px}
.v2-video-ad-panel img{max-width:100%;height:auto;margin:auto;border-radius:var(--v2-r-sm)}

.v2-video-related{margin-top:48px}
.v2-video-section-head{margin-bottom:20px}
.v2-video-section-head h2{margin:0;font-family:var(--v2-display);font-size:clamp(26px,3vw,34px);font-weight:500;line-height:1.2;color:var(--v2-ink)}
.v2-video-related .v2-grid .main-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:1080px){
  .v2-video-layout{grid-template-columns:1fr}
  .v2-video-ad-panel{position:static}
  .v2-video-ad-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v2-video-related .v2-grid .main-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:768px){
  .v2-video-shell{padding-top:24px;padding-bottom:48px}
  .v2-video-view .video-controls{align-items:stretch;flex-direction:column}
  .v2-video-view .video-controls .col{width:100%}
  .v2-video-view .block-screenshots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v2-video-related .v2-grid .main-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

@media (max-width:480px){
  .v2-video-shell{padding-left:16px;padding-right:16px}
  .v2-video-head h1{font-size:30px}
  .v2-video-player .no-player .message{padding:16px;font-size:14px}
  .v2-video-view .video-controls{padding:12px}
  .v2-video-view .tab-content{padding:18px}
  .v2-video-ad-pair{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .v2-video-page *{transition:none!important;animation:none!important}
}