:root {
  --bg: #02010f;
  --fg: #eaeaea;
  --muted: #a7a7a7;
  --accent: #ff3b3b;
  --card: #161616;
  --blur-bg: rgba(0,0,0,.5);
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --fg: #101010;
  --muted: #4d4d4d;
  --card: #f4f4f4;
  --blur-bg: rgba(255,255,255,.6);
}

.video-page {
  position: relative;
  color: #C4C7F2;
  font-family: 'Montserrat', sans-serif;
}

/* BACKDROP */
.backdrop {
  position: relative;
  width: 100%;
  height: 580px;
  overflow: hidden;
}

.backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.backdrop-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--bg) 85%);
}

/* CONTENT */
.video-content {
  max-width: 900px;
  margin: -120px auto 40px;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

/* TITLE */
.video-title {
  font-size: 42px;
  font-weight: 900;
  margin-bottom: 14px;
  background: linear-gradient(90deg, #1D97F1, #0841C9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* META */
.video-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.meta-text span {
  margin-right: 14px;
  opacity: .9;
}

/* RATING */
/* rating circle */
.rating-circle {
    width: 48px;
    height: 48px;
}

.rating-circle svg {
    width: 48px;
    height: 48px;
}

.rating-circle .bg {
    fill: none;
    stroke: #032C7D33;
    stroke-width: 4;
}

.rating-circle .progress {
    fill: none;
    stroke: #1D97F1;
    stroke-width: 4;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* число внутри */
.rating-circle text {
    fill: #C4C7F2;
    font-size: 14px;
    font-weight: bold;
    dominant-baseline: middle;
    alignment-baseline: middle;
}


/* share popup */
.share-menu {
    display: none;
    background: #020D2F;
    padding: 10px;
    border-radius: 8px;
    position: absolute;
    margin-top: 10px;
}

.share-menu.open {
    display: block;
}



/* SEO TITLE */
.seo-title {
  font-size: 22px;
  margin-top: 20px;
  margin-bottom: 10px;
  color: #C4C7F2;
}

/* DESCRIPTION */
.video-description {
  font-size: 16px;
  line-height: 1.6;
  opacity: .9;
  margin-bottom: 20px;
}

/* PERSONS */
.director,
.actors {
  margin-bottom: 12px;
}

/* BUTTONS */
.video-buttons {
  display: flex;
  gap: 14px;
  margin-top: 25px;
}

.btn-watch {
  padding: 12px 22px;
  border-radius: 10px;
  background: linear-gradient(90deg, #032C7D, #0841C9);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.btn-fav,
.btn-share {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #032C7D;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SHARE PANEL */
.share-wrapper {
  position: relative;
}

.share-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 60px;
  right: 0;
  background: #020D2F;
  padding: 12px;
  border-radius: 10px;
  width: 180px;
}

.share-panel a {
  padding: 8px 0;
  color: #C4C7F2;
  text-decoration: none;
}

.share-wrapper.open .share-panel {
  display: flex;
}