/* ===== Category card override (info row) ===== */
.video-info-row .category-card { width: 100%; }

/* ===== Video player ===== */
.video-player-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  position: relative;
}
.video-player-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
}
.play-btn {
  width: 72px;
  height: 72px;
  background: rgba(91,33,182,0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
  backdrop-filter: blur(4px);
}
.play-btn:hover {
  transform: scale(1.08);
  background: rgba(91,33,182,1);
}
.play-btn i { margin-left: 4px; }

/* ===== Video info ===== */
.video-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 120px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  padding: 0.6rem 0.85rem;
}
.video-description {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  text-align: left;
  overflow: hidden;
}
.video-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
}
@media (max-width: 1279px) {
  .video-title { text-align: center; }
}
.video-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.video-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.video-meta-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: rgba(196,192,216,0.55);
}
.video-meta-item i { font-size: 0.65rem; color: var(--color-accent); }
.video-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--color-text-muted);
  font-size: 0.76rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
  font-family: inherit;
}
.action-btn:hover {
  border-color: rgba(91,33,182,0.4);
  background: rgba(91,33,182,0.08);
  color: #c4b5fd;
}
.action-btn.active {
  border-color: rgba(91,33,182,0.5);
  background: rgba(91,33,182,0.12);
  color: #c4b5fd;
}
.action-btn i { font-size: 0.78rem; }

/* ===== Divider ===== */
.video-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
}

/* ===== Author bar ===== */
.video-author-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.video-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #5B21B6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
}
.author-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
  transition: color 0.15s;
}
.video-author:hover .author-name { color: #c4b5fd; }
.author-videos {
  font-size: 0.72rem;
  color: rgba(196,192,216,0.45);
  margin-top: 1px;
}

/* ===== Video tag ===== */
.video-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(91,33,182,0.05);
  font-size: 0.73rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.video-tag:hover {
  border-color: rgba(91,33,182,0.4);
  color: #c4b5fd;
  background: rgba(91,33,182,0.1);
}

/* (video-stars-and-tags moved to website.css) */

/* ===== Layout: player + sidebar ===== */
.video-layout {
  display: grid;
  grid-template-columns: 920px 300px;
  gap: 10px;
  align-items: stretch;
}
@media (max-width: 1279px) {
  .video-layout { grid-template-columns: 610px 300px; }
}
@media (max-width: 970px) {
  .video-layout { grid-template-columns: 1fr; align-items: start; max-width: 610px; margin-left: auto; margin-right: auto; }
  .ad-placeholder { flex: 1; width: auto; }
}
@media (max-width: 660px) {
  .video-layout { max-width: 300px; }
}

/* ===== Info row ===== */
.video-info-row {
  display: grid;
  grid-template-columns: 610px 300px 300px;
  gap: 10px;
  max-width: 1230px;
}
@media (max-width: 1279px) {
  .video-info-row { grid-template-columns: 300px 300px 300px; max-width: 920px; }
  .video-description { display: none; }
  .video-info { justify-content: center; height: 120px; }
}
@media (max-width: 970px) {
  .video-info-row { grid-template-columns: 300px 300px; max-width: 610px; margin-left: auto; margin-right: auto; }
  .video-info { grid-column: 1 / -1; height: auto; justify-content: flex-start; }
  .video-description { display: block; text-align: left; }
  .video-title { text-align: left; }
}
@media (max-width: 660px) {
  .video-info-row { grid-template-columns: 1fr; max-width: 300px; }
}

/* ===== Sidebar banners ===== */
.video-ads {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
@media (min-width: 971px) {
  .video-ads { flex-direction: column; }
  .ad-placeholder { width: 100%; flex: none; }
}
@media (max-width: 660px) {
  .video-ads { flex-direction: column; }
  .ad-placeholder { width: 100%; flex: none; }
}
.ad-placeholder {
  display: block;
  width: 100%;
  background: var(--color-surface);
  overflow: hidden;
}
.ad-placeholder img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Related videos ===== */
.related-videos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1230px;
  width: 100%;
  justify-content: flex-start;
}
@media (max-width: 1279px) { .related-videos { max-width: 920px; } }
@media (max-width: 970px)  { .related-videos { max-width: 610px; margin-left: auto; margin-right: auto; } }
@media (max-width: 660px)  { .related-videos { max-width: 300px; } }

/* (related-categories moved to website.css) */