/* ===== realmedia.tv — Netflix-Style Complete Redesign ===== */
/* Loaded via plugin CSS pipeline */
/* ── IMMEDIATE DARK BACKGROUND (prevents white flash before JS kicks in) ── */
html, body {
  background: #141414 !important;
}

/* ===== Flash Guard: Hide PeerTube Angular App Root ===== */
/* Targets my-app (PeerTube's root Angular component) to prevent white
   content from rendering at first paint. Our injected overlays
   (.rm-landing-root, .rm-netflix-home, .rm-watch-overlay, .rm-gate-overlay)
   are siblings of my-app, so they remain visible. */
my-app {
  visibility: hidden !important;
}

/* Show my-app for pages where we don't inject a dark overlay
   (settings, admin, user profile, etc.). */
body.rm-show-app my-app {
  visibility: visible !important;
}

/* Also hide PeerTube shell alerts that render before Angular boots. */
noscript.alert,
#incompatible-browser {
  display: none !important;
}

:root {
  --rm-primary: #e50914;
  --rm-primary-hover: #f6121d;
  --rm-bg-dark: #141414;
  --rm-bg-card: #1a1a1a;
  --rm-bg-input: #2a2a2a;
  --rm-text-white: #ffffff;
  --rm-text-muted: #808080;
  --rm-accent-gold: #f5c518;
  --rm-border: #333333;
  --rm-overlay: rgba(0, 0, 0, 0.85);
  --rm-overlay-light: rgba(0, 0, 0, 0.6);
  --rm-hero-gradient: linear-gradient(to top, #141414 10%, transparent 50%, rgba(20,20,20,0.7) 90%);
  --rm-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body.realmedia-theme {
  background-color: var(--rm-bg-dark) !important;
  color: var(--rm-text-white) !important;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
body.realmedia-theme a, body.realmedia-theme a:visited { color: var(--rm-text-white); text-decoration: none; transition: color 0.2s ease; }
body.realmedia-theme a:hover { color: var(--rm-primary); }

body.realmedia-theme .header, body.realmedia-theme .p-header, body.realmedia-theme .menu-wrapper {
  background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, transparent 100%);
  border-bottom: none !important;
  padding: 0 4%;
  height: 68px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background-color 0.4s ease;
}
body.realmedia-theme .header.scrolled { background: rgba(0,0,0,0.95); }
body.realmedia-theme .logo, body.realmedia-theme .brand { height: 31px; margin-top: 0; }
body.realmedia-theme .icon.icon-logo { color: var(--rm-primary) !important; }

body.realmedia-theme .search-wrapper input, body.realmedia-theme .search-video input {
  background: var(--rm-bg-input) !important;
  border: 1px solid var(--rm-border) !important;
  color: var(--rm-text-white) !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}
body.realmedia-theme .search-wrapper input:focus, body.realmedia-theme .search-video input:focus {
  border-color: var(--rm-text-white) !important;
  outline: none !important;
}

body.realmedia-theme .btn, body.realmedia-theme .button, body.realmedia-theme .peertube-button, body.realmedia-theme .action-button {
  border-radius: 4px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: var(--rm-transition) !important;
}
body.realmedia-theme .btn-primary, body.realmedia-theme .peertube-button {
  background-color: var(--rm-primary) !important;
  border: none !important;
  color: var(--rm-text-white) !important;
}
body.realmedia-theme .btn-primary:hover, body.realmedia-theme .peertube-button:hover {
  background-color: var(--rm-primary-hover) !important;
  transform: scale(1.05);
}
body.realmedia-theme .btn-secondary, body.realmedia-theme .action-button {
  background: rgba(255,255,255,0.1) !important;
  border: none !important;
  color: var(--rm-text-white) !important;
  backdrop-filter: blur(4px);
}
body.realmedia-theme .btn-secondary:hover { background: rgba(255,255,255,0.2) !important; }

body.realmedia-theme .video-card, body.realmedia-theme .video-miniature {
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  transition: var(--rm-transition) !important;
  margin: 0 !important;
}
body.realmedia-theme .video-card:hover, body.realmedia-theme .video-miniature:hover {
  transform: scale(1.05);
  z-index: 10;
}
body.realmedia-theme .video-card-thumbnail, body.realmedia-theme .video-miniature .thumbnail-image {
  border-radius: 4px !important;
  overflow: hidden;
}
body.realmedia-theme .video-card-thumbnail img, body.realmedia-theme .video-miniature .thumbnail-image img {
  transition: transform 0.3s ease;
}
body.realmedia-theme .video-card:hover .video-card-thumbnail img, body.realmedia-theme .video-miniature:hover .thumbnail-image img {
  transform: scale(1.1);
}
body.realmedia-theme .video-card-name, body.realmedia-theme .video-miniature .video-miniature-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--rm-text-white) !important;
  margin-top: 8px !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

body.realmedia-theme .videos-header { display: none !important; }
body.realmedia-theme .videos-list { gap: 8px !important; }
body.realmedia-theme .section-title {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--rm-text-white) !important;
  margin: 40px 4% 10px !important;
  padding: 0 !important;
}
body.realmedia-theme .videos-list-section { padding: 0 4% !important; margin-bottom: 30px !important; }

body.realmedia-theme .hero-banner {
  width: 100%;
  height: 65vh;
  min-height: 400px;
  max-height: 700px;
  position: relative;
  margin-bottom: 40px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
body.realmedia-theme .hero-banner .hero-gradient {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, #141414 0%, transparent 50%, rgba(20,20,20,0.5) 100%);
}
body.realmedia-theme .hero-banner .hero-content {
  position: absolute;
  bottom: 15%; left: 4%; right: 4%;
  z-index: 5;
}
body.realmedia-theme .hero-banner .hero-title {
  font-size: 3.2rem; font-weight: 800; margin-bottom: 12px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
body.realmedia-theme .hero-banner .hero-description {
  font-size: 1.1rem; max-width: 50%; line-height: 1.5;
  color: rgba(255,255,255,0.8);
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5); margin-bottom: 20px;
}
body.realmedia-theme .hero-banner .hero-actions { display: flex; gap: 12px; align-items: center; }
body.realmedia-theme .hero-banner .hero-play-btn {
  background: var(--rm-text-white) !important; color: #000 !important;
  padding: 10px 30px !important; font-size: 1.1rem !important;
  border: none; border-radius: 4px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: var(--rm-transition);
}
body.realmedia-theme .hero-banner .hero-play-btn:hover { background: rgba(255,255,255,0.75) !important; }
body.realmedia-theme .hero-banner .hero-info-btn {
  background: rgba(109,109,110,0.7) !important; color: var(--rm-text-white) !important;
  padding: 10px 24px !important; font-size: 1.1rem !important;
  border: none; border-radius: 4px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: var(--rm-transition);
}
body.realmedia-theme .hero-banner .hero-info-btn:hover { background: rgba(109,109,110,0.4) !important; }
body.realmedia-theme .hero-banner .hero-meta {
  display: flex; gap: 12px; align-items: center;
  font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-bottom: 16px;
}
body.realmedia-theme .hero-banner .hero-meta .match-score { color: var(--rm-accent-gold); font-weight: 700; }
body.realmedia-theme .hero-banner .hero-meta .maturity-rating {
  padding: 2px 6px; border: 1px solid rgba(255,255,255,0.4); font-size: 0.75rem;
}

body.realmedia-theme .video-watch { padding-top: 80px !important; }
body.realmedia-theme .video-watch .player-wrapper { background: #000 !important; }
body.realmedia-theme .video-info { padding: 20px 4% !important; }
body.realmedia-theme .video-info .video-title { font-size: 24px !important; font-weight: 700 !important; }
body.realmedia-theme .video-views, body.realmedia-theme .likes-dislikes {
  color: var(--rm-text-muted) !important; font-size: 14px !important;
}
body.realmedia-theme .video-attributes {
  border-top: 1px solid var(--rm-border) !important; border-bottom: 1px solid var(--rm-border) !important;
  padding: 16px 0 !important; margin: 16px 0 !important;
}

body.realmedia-theme .login-form-wrapper {
  background: rgba(0,0,0,0.75) !important;
  border-radius: 8px !important; padding: 60px 68px 40px !important;
  max-width: 450px !important; margin: 0 auto !important;
}
body.realmedia-theme .login-form-wrapper h2 { font-size: 32px !important; font-weight: 700 !important; margin-bottom: 28px !important; }
body.realmedia-theme .login-form-wrapper input {
  background: var(--rm-bg-input) !important; border: none !important;
  border-radius: 4px !important; color: var(--rm-text-white) !important;
  padding: 14px 16px !important; font-size: 16px !important;
}
body.realmedia-theme .login-form-wrapper input:focus { background: #454545 !important; outline: none !important; }

body.realmedia-theme .footer, body.realmedia-theme .p-footer {
  background: var(--rm-bg-dark) !important;
  border-top: 1px solid var(--rm-border) !important;
  padding: 30px 4% !important;
  color: var(--rm-text-muted) !important;
  font-size: 13px !important;
}

body.realmedia-theme::-webkit-scrollbar { width: 8px; }
body.realmedia-theme::-webkit-scrollbar-track { background: var(--rm-bg-dark); }
body.realmedia-theme::-webkit-scrollbar-thumb { background: var(--rm-border); border-radius: 4px; }
body.realmedia-theme::-webkit-scrollbar-thumb:hover { background: #555; }

@media (max-width: 768px) {
  body.realmedia-theme .hero-banner { height: 45vh; }
  body.realmedia-theme .hero-banner .hero-title { font-size: 1.8rem; }
  body.realmedia-theme .hero-banner .hero-description { max-width: 100%; font-size: 0.9rem; }
  body.realmedia-theme .login-form-wrapper { padding: 40px 24px !important; }
  body.realmedia-theme .section-title { font-size: 20px !important; }
}

/* Gate overlay */
.rm-gate-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.rm-gate-overlay .gate-card {
  background: #1a1a1a; border: 1px solid #333; border-radius: 12px;
  padding: 48px 40px; max-width: 420px; text-align: center; color: #fff;
}
.rm-gate-overlay .gate-card h2 { font-size: 28px; font-weight: 700; margin-bottom: 12px; }
.rm-gate-overlay .gate-card p { color: #808080; margin-bottom: 24px; line-height: 1.5; }
.rm-gate-overlay .gate-card .gate-pricing { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.rm-gate-overlay .gate-card .gate-plan {
  background: rgba(255,255,255,0.05); border: 1px solid #333; border-radius: 8px;
  padding: 16px; text-align: left; display: flex; justify-content: space-between;
  align-items: center; cursor: pointer; transition: all 0.3s ease;
}
.rm-gate-overlay .gate-card .gate-plan:hover { border-color: #e50914; background: rgba(229,9,20,0.1); }
.rm-gate-overlay .gate-card .gate-plan.selected { border-color: #e50914; }
.rm-gate-overlay .gate-card .gate-plan .plan-name { font-weight: 600; }
.rm-gate-overlay .gate-card .gate-plan .plan-price { color: #e50914; font-weight: 700; font-size: 18px; }
.rm-gate-overlay .gate-card .subscribe-btn {
  background: #e50914; color: #fff; width: 100%; padding: 14px;
  font-size: 18px; font-weight: 700; border: none; border-radius: 4px;
  cursor: pointer; transition: all 0.3s ease;
}
.rm-gate-overlay .gate-card .subscribe-btn:hover { background: #f6121d; }
.rm-gate-overlay .gate-card .subscribe-btn:disabled { background: #555; cursor: not-allowed; }

/* ===== Netflix Category Rows ===== */
body.realmedia-theme .rm-video-section {
  padding: 0 0 40px;
  margin-top: -60px;
  position: relative;
  z-index: 6;
}
body.realmedia-theme .rm-category-row {
  margin-bottom: 36px;
}
body.realmedia-theme .rm-row-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--rm-text-white);
  margin: 0 4% 12px;
  padding: 0;
}
body.realmedia-theme .rm-card-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 4% 28px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--rm-border) transparent;
}
body.realmedia-theme .rm-card-grid::-webkit-scrollbar { height: 8px; }
body.realmedia-theme .rm-card-grid::-webkit-scrollbar-track { background: transparent; }
body.realmedia-theme .rm-card-grid::-webkit-scrollbar-thumb { background: var(--rm-border); border-radius: 4px; }
body.realmedia-theme .rm-card-grid::-webkit-scrollbar-thumb:hover { background: #555; }
body.realmedia-theme .rm-card {
  flex: 0 0 auto;
  width: 300px;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  background: var(--rm-bg-card);
  transition: var(--rm-transition);
}
body.realmedia-theme .rm-card:hover {
  transform: scale(1.08);
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7);
}
body.realmedia-theme .rm-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
  background: #000;
}
body.realmedia-theme .rm-card .rm-card-info {
  padding: 8px 10px 10px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.25s ease, max-height 0.25s ease;
}
body.realmedia-theme .rm-card:hover .rm-card-info {
  opacity: 1;
  max-height: 120px;
}
body.realmedia-theme .rm-card .rm-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--rm-text-white);
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.realmedia-theme .rm-card .rm-card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--rm-text-muted);
}
body.realmedia-theme .rm-card .rm-card-match { color: #46d369; font-weight: 700; }
body.realmedia-theme .rm-card .rm-card-year { color: var(--rm-text-muted); }
body.realmedia-theme .rm-card .rm-card-maturity {
  padding: 1px 5px;
  border: 1px solid rgba(255,255,255,0.4);
  font-size: 11px;
  color: rgba(255,255,255,0.7);
}
body.realmedia-theme .rm-video-section.rm-loading {
  min-height: 200px;
}

/* Hide the channel avatar/logo on native video miniatures (browse/search
   listings). The Netflix home cards never render one; this keeps PeerTube's
   own thumbnails consistent — no small channel logo in the thumbnail corner. */
body.realmedia-theme my-video-miniature my-actor-avatar,
body.realmedia-theme .video-miniature .actor-avatar,
body.realmedia-theme .video-miniature my-actor-avatar { display: none !important; }

/* Hide PeerTube default browse section underneath hero */
body.realmedia-theme my-videos-list { display: none !important; }
body.realmedia-theme h1.visually-hidden { display: none !important; }
/* Also hide the admin-sidebar if it bleeds into the common view */
body.realmedia-theme .videos-header:empty { display: none; }

/* ===== Netflix Cinematic Watch Page (fallback path) =====
   Primary styling is set inline via JS in client/video-watch.js (Angular
   ViewEncapsulation can stop this sheet reaching injected nodes). These rules
   are a secondary safety net only. */
body.realmedia-theme .rm-watch-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--rm-bg-dark, #141414);
  color: #fff;
}
body.realmedia-theme .rm-watch-content {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
body.realmedia-theme .rm-watch-player-section { flex: 1 1 68%; min-width: 0; }
body.realmedia-theme .rm-watch-sidebar { flex: 0 0 32%; max-width: 420px; }
body.realmedia-theme .rm-watch-related .rm-row-title {
  margin-left: 4%;
  margin-right: 4%;
}
@media (max-width: 768px) {
  body.realmedia-theme .rm-watch-content { flex-direction: column; }
  body.realmedia-theme .rm-watch-sidebar { flex: 1 1 auto; max-width: none; }
}
@media (max-width: 768px) {
  body.realmedia-theme .rm-card { width: 180px; }
  body.realmedia-theme .rm-card img { height: 102px; }
  body.realmedia-theme .rm-row-title { font-size: 1.1rem; }
}

/* ============================================================
   COUTURE POLISH LAYER — Netflix-grade refinements
   Appended overrides (source order wins at equal specificity).
   Everything here is ADDITIVE; nothing above is removed.
   ============================================================ */

/* ---- Global typography density ---- */
body.realmedia-theme {
  letter-spacing: -0.01em;
  scrollbar-width: thin;
  scrollbar-color: #333 #141414;
  scroll-behavior: smooth;
}

/* ---- HERO BANNER — bigger, more cinematic ---- */
body.realmedia-theme .hero-banner {
  height: 74vh;
  min-height: 460px;
  max-height: 820px;
  margin-bottom: 8px;
  /* Subtle, slow Ken-Burns drift for a living backdrop */
  animation: rm-hero-pan 36s ease-in-out infinite alternate;
  will-change: background-size, background-position;
}
@keyframes rm-hero-pan {
  from { background-size: 100% auto; background-position: center 48%; }
  to   { background-size: 108% auto; background-position: center 52%; }
}
/* Layered gradient: bottom fade + left vignette for text legibility */
body.realmedia-theme .hero-banner .hero-gradient {
  background:
    linear-gradient(to top, #141414 6%, rgba(20,20,20,0.45) 38%, transparent 62%),
    linear-gradient(to right, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 32%, transparent 58%);
}
body.realmedia-theme .hero-banner .hero-content {
  bottom: 22%;
  max-width: 1600px;
}
body.realmedia-theme .hero-banner .hero-title {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.45),
    0 8px 30px rgba(0,0,0,0.55);
}
body.realmedia-theme .hero-banner .hero-description {
  font-size: 1.2rem;
  line-height: 1.45;
  max-width: 42%;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}
body.realmedia-theme .hero-banner .hero-meta {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
/* Eyebrow: red "R" logo glyph + spaced wordmark above the hero title */
body.realmedia-theme .hero-banner .hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
body.realmedia-theme .hero-banner .hero-eyebrow .rm-mark {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  color: var(--rm-primary);
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
/* The thin Netflix-style gradient bar pinned to the hero's bottom edge */
body.realmedia-theme .hero-banner .netflix-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(to right, transparent, var(--rm-primary) 50%, transparent);
  opacity: 0.9;
  z-index: 6;
}
body.realmedia-theme .hero-banner .hero-play-btn:hover,
body.realmedia-theme .hero-banner .hero-info-btn:hover {
  transform: scale(1.04);
}

/* ---- VIDEO SECTION — first row peeks gently under the hero fade ---- */
body.realmedia-theme .rm-video-section {
  /* A modest pull-up so the first row tucks into the hero's bottom gradient
     without colliding with the hero copy/buttons (was -110px, far too much). */
  margin-top: -40px;
}
body.realmedia-theme .rm-category-row {
  /* Netflix-like density, but with real breathing room between rows
     (was 4px, which made adjacent rows feel cramped/overlapping). */
  margin-bottom: 24px;
  animation: rm-fade-in 0.6s ease both;
}
@keyframes rm-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.realmedia-theme .rm-row-title {
  font-size: 1.36rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #e5e5e5;
  margin-bottom: 2px;
  transition: color 0.2s ease;
}
/* Subtle "explore all" affordance: title brightens with its row */
body.realmedia-theme .rm-category-row:hover .rm-row-title { color: #fff; }

/* ---- NETFLIX CAROUSEL — arrows + scroll-snap ---- */
body.realmedia-theme .rm-row-carousel {
  position: relative;
}
/* Hide the native scrollbar; scrolling is driven by arrows / touch / wheel */
body.realmedia-theme .rm-card-grid {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Tight vertical rhythm: just enough top/bottom room for the hover scale,
     so rows pack densely like the Netflix reference. */
  padding: 16px 4% 18px;
  gap: 8px;
}
body.realmedia-theme .rm-card-grid::-webkit-scrollbar { height: 0; width: 0; display: none; }
body.realmedia-theme .rm-card { scroll-snap-align: start; }

/* Edge arrows — full card-height bars (Netflix), fade in on row hover.
   Top/bottom match the grid's vertical padding so they span the posters. */
body.realmedia-theme .rm-carousel-arrow {
  position: absolute;
  top: 16px;
  bottom: 18px;
  width: 3.6%;
  min-width: 42px;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.2s ease;
}
body.realmedia-theme .rm-carousel-arrow > * {
  display: inline-block;
  transition: transform 0.18s ease;
}
body.realmedia-theme .rm-carousel-arrow.left {
  left: 0;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.25));
}
body.realmedia-theme .rm-carousel-arrow.right {
  right: 0;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(to left, rgba(0,0,0,0.7), rgba(0,0,0,0.25));
}
body.realmedia-theme .rm-row-carousel:hover .rm-carousel-arrow { opacity: 1; }
body.realmedia-theme .rm-carousel-arrow:hover { background: rgba(0,0,0,0.8); }
body.realmedia-theme .rm-carousel-arrow:hover > * { transform: scale(1.4); }
body.realmedia-theme .rm-carousel-arrow.rm-arrow-hidden {
  opacity: 0 !important;
  pointer-events: none;
}

/* ---- CARD — clean poster at rest, overlay reveal on hover ----
   The card is a pure 16:9 poster until hovered. The metadata + controls live
   in an overlay anchored to the bottom of the thumb, so revealing them never
   changes the card's height — the row stays rock-steady (Netflix behaviour). */
body.realmedia-theme .rm-card {
  width: 250px;
  background: transparent;
  border-radius: 5px;
  overflow: visible;
  transition: transform 0.30s cubic-bezier(0.25,0.46,0.45,0.94);
}
body.realmedia-theme .rm-card:hover {
  transform: scale(1.10);
  z-index: 30;
}
/* Thumbnail wrapper: the whole card visually. Clips zoom + overlay. */
body.realmedia-theme .rm-card .rm-card-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  transition: box-shadow 0.30s ease;
}
body.realmedia-theme .rm-card:hover .rm-card-thumb {
  box-shadow: 0 16px 42px rgba(0,0,0,0.85);
}
body.realmedia-theme .rm-card .rm-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}
body.realmedia-theme .rm-card:hover .rm-card-thumb img {
  transform: scale(1.07);
}

/* Top-left "R" origin badge + top-right duration pill */
body.realmedia-theme .rm-card .rm-card-badge {
  position: absolute;
  top: 8px; left: 8px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rm-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  border-radius: 3px;
  letter-spacing: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  z-index: 3;
}
body.realmedia-theme .rm-card .rm-card-duration {
  position: absolute;
  top: 8px; right: 8px;
  padding: 2px 6px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 3px;
  letter-spacing: 0;
  z-index: 3;
  opacity: 0.92;
}

/* Bottom gradient scrim that fades in with the overlay for text legibility */
body.realmedia-theme .rm-card .rm-card-grad {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 72%;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 42%, transparent 100%);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
  z-index: 2;
}
body.realmedia-theme .rm-card:hover .rm-card-grad { opacity: 1; }

/* Hover overlay — controls + metadata pinned to bottom of the thumb */
body.realmedia-theme .rm-card .rm-card-hover {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 11px 11px;
  z-index: 3;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.26s ease, transform 0.30s cubic-bezier(0.25,0.46,0.45,0.94);
  pointer-events: none;
}
body.realmedia-theme .rm-card:hover .rm-card-hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
body.realmedia-theme .rm-card .rm-card-hover-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
/* Circular white play button + outlined add button */
body.realmedia-theme .rm-card .rm-card-play,
body.realmedia-theme .rm-card .rm-card-add {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
body.realmedia-theme .rm-card .rm-card-play {
  background: #fff;
  color: #000;
  padding-left: 2px;
}
body.realmedia-theme .rm-card .rm-card-play svg { width: 15px; height: 15px; }
body.realmedia-theme .rm-card .rm-card-play:hover { transform: scale(1.12); }
body.realmedia-theme .rm-card .rm-card-add {
  background: rgba(20,20,20,0.6);
  border: 2px solid rgba(255,255,255,0.6);
  color: #fff;
  padding: 0;
}
body.realmedia-theme .rm-card .rm-card-add svg { width: 14px; height: 14px; }
body.realmedia-theme .rm-card .rm-card-add:hover { border-color: #fff; transform: scale(1.12); }
body.realmedia-theme .rm-card .rm-card-add.rm-added {
  background: #fff; color: #000; border-color: #fff;
}
body.realmedia-theme .rm-card .rm-card-hover-title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
body.realmedia-theme .rm-card .rm-card-hover-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  letter-spacing: 0;
}
body.realmedia-theme .rm-card .rm-card-hover-meta .rm-card-match { color: #46d369; font-weight: 700; }
body.realmedia-theme .rm-card .rm-card-hover-meta .rm-card-year { color: rgba(255,255,255,0.78); }
body.realmedia-theme .rm-card .rm-card-hover-meta .rm-card-maturity {
  padding: 0 4px;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 2px;
  font-size: 10px;
  color: rgba(255,255,255,0.85);
}

/* ---- SKELETON LOADING — shimmer while videos fetch ---- */
body.realmedia-theme .rm-skeleton-row {
  margin-bottom: 18px;
  transition: opacity 0.3s ease;
}
body.realmedia-theme .rm-skeleton-row.rm-fade-out { opacity: 0; }
body.realmedia-theme .rm-skeleton-row .rm-skeleton-title {
  height: 20px;
  width: 200px;
  margin: 0 4% 2px;
  border-radius: 4px;
}
body.realmedia-theme .rm-skeleton-grid {
  display: flex;
  gap: 8px;
  padding: 16px 4% 18px;
  overflow: hidden;
}
body.realmedia-theme .rm-skeleton-card {
  flex: 0 0 auto;
  width: 250px;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
}
body.realmedia-theme .rm-skeleton-title,
body.realmedia-theme .rm-skeleton-card {
  background: linear-gradient(100deg, #1a1a1a 30%, #2a2a2a 50%, #1a1a1a 70%);
  background-size: 200% 100%;
  animation: rm-shimmer 1.4s ease-in-out infinite;
}
@keyframes rm-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (max-width: 768px) {
  body.realmedia-theme .rm-skeleton-card { width: 180px; aspect-ratio: 16 / 9; }
}

/* ---- WATCH PAGE related rail uses the carousel too ---- */
body.realmedia-theme .rm-watch-related .rm-card-grid {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-left: 0;
  padding-right: 0;
}
body.realmedia-theme .rm-watch-related .rm-carousel-arrow.left { left: -6px; }
body.realmedia-theme .rm-watch-related .rm-carousel-arrow.right { right: -6px; }

/* ---- FOOTER — Netflix tone ---- */
body.realmedia-theme .footer, body.realmedia-theme .p-footer {
  background: var(--rm-bg-dark) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  color: #737373 !important;
  letter-spacing: 0.01em;
}
body.realmedia-theme .footer a, body.realmedia-theme .p-footer a { color: #737373 !important; }
body.realmedia-theme .footer a:hover, body.realmedia-theme .p-footer a:hover { color: #fff !important; }

/* ---- Responsive re-assertions (must follow desktop overrides) ---- */
@media (max-width: 768px) {
  body.realmedia-theme .hero-banner { height: 56vh; min-height: 360px; }
  body.realmedia-theme .hero-banner .hero-title { font-size: 2rem; }
  body.realmedia-theme .hero-banner .hero-description { max-width: 100%; font-size: 0.95rem; }
  body.realmedia-theme .rm-video-section { margin-top: -20px; }
  body.realmedia-theme .rm-row-title { font-size: 1.18rem; }
  body.realmedia-theme .rm-card { width: 180px; }
  /* Touch devices: keep arrows out of the way, rely on swipe */
  body.realmedia-theme .rm-carousel-arrow { display: none; }
}

/* ============================================================
   LANDING PAGE — premium marketing page for logged-out visitors
   Full-bleed cinematic hero, feature highlights, pricing.
   The landing root sits at z-index 20000 — above PeerTube's
   `.root-header` (17500) — so no app chrome shows through.
   ============================================================ */
body.rm-landing-active { overflow: hidden; }

/* Hide all PeerTube chrome on the marketing landing page. Class-based so it
   survives Angular re-renders (the JS observer is a belt-and-suspenders for the
   inline path). Covers the top bar, left sidebar, default browse list, mobile
   responsive controls (hamburger / mobile search) and the footer. Scoped to
   rm-landing-active so logged-in browse and all other routes keep normal chrome. */
body.rm-landing-active .root-header,
body.rm-landing-active .header,
body.rm-landing-active .p-header,
body.rm-landing-active my-header,
body.rm-landing-active #left-menu,
body.rm-landing-active my-menu,
body.rm-landing-active .sub-header-container,
body.rm-landing-active .menu-wrapper,
body.rm-landing-active .main-menu-wrapper,
body.rm-landing-active .hamburger-button,
body.rm-landing-active .menu-toggle,
body.rm-landing-active .logo-and-menu,
body.rm-landing-active my-search-typeahead,
body.rm-landing-active .search-typeahead-container,
body.rm-landing-active my-videos-list,
body.rm-landing-active my-video-filters-header,
body.rm-landing-active .videos-header,
body.rm-landing-active .margin-content,
body.rm-landing-active .footer-powered-by,
body.rm-landing-active .footer,
body.rm-landing-active .p-footer { display: none !important; }

body.realmedia-theme .rm-landing-root {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-height: 100dvh;
  z-index: 20000;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--rm-bg-dark);
  color: var(--rm-text-white);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  animation: rm-fade-in 0.5s ease both;
}

/* ---- Hero ---- */
body.realmedia-theme .rm-landing-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 120px 6% 80px;
  animation: rm-hero-pan 40s ease-in-out infinite alternate;
}
body.realmedia-theme .rm-landing-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, #141414 4%, rgba(20,20,20,0.35) 45%, rgba(20,20,20,0.55) 100%),
    linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 38%, rgba(0,0,0,0.15) 70%);
}
body.realmedia-theme .rm-landing-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
}
/* Cinematic staggered entrance for the hero copy on load */
body.realmedia-theme .rm-landing-hero-inner > * {
  animation: rm-landing-up 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
body.realmedia-theme .rm-landing-hero-inner > *:nth-child(1) { animation-delay: 0.10s; }
body.realmedia-theme .rm-landing-hero-inner > *:nth-child(2) { animation-delay: 0.22s; }
body.realmedia-theme .rm-landing-hero-inner > *:nth-child(3) { animation-delay: 0.34s; }
body.realmedia-theme .rm-landing-hero-inner > *:nth-child(4) { animation-delay: 0.46s; }
@keyframes rm-landing-up {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.realmedia-theme .rm-landing-eyebrow {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,0.75);
  margin-bottom: 22px;
}
body.realmedia-theme .rm-landing-eyebrow span { color: var(--rm-primary); }
body.realmedia-theme .rm-landing-headline {
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 10px 40px rgba(0,0,0,0.5);
}
body.realmedia-theme .rm-landing-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
  max-width: 600px;
  margin: 0 0 34px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
body.realmedia-theme .rm-landing-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- Buttons ---- */
body.realmedia-theme .rm-landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 6px;
  font-size: 1.08rem;
  font-weight: 700;
  padding: 14px 32px;
  cursor: pointer;
  transition: var(--rm-transition);
  text-decoration: none;
}
body.realmedia-theme .rm-landing-btn-primary {
  background: var(--rm-primary);
  color: #fff;
  box-shadow: 0 8px 26px rgba(229,9,20,0.35);
}
body.realmedia-theme .rm-landing-btn-primary:hover {
  background: var(--rm-primary-hover);
  color: #fff;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 10px 32px rgba(229,9,20,0.5);
}
/* Light sheen sweeps across the primary CTA on hover */
body.realmedia-theme .rm-landing-btn-primary {
  position: relative;
  overflow: hidden;
}
body.realmedia-theme .rm-landing-btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
body.realmedia-theme .rm-landing-btn-primary:hover::after { left: 120%; }
body.realmedia-theme .rm-landing-btn-ghost {
  background: rgba(255,255,255,0.12);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.realmedia-theme .rm-landing-btn-ghost:hover {
  background: rgba(255,255,255,0.22);
  color: #fff;
  transform: translateY(-1px) scale(1.02);
}

/* ---- Scroll cue ---- */
body.realmedia-theme .rm-landing-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: rm-landing-bob 1.8s ease-in-out infinite;
  transition: background 0.2s ease;
}
body.realmedia-theme .rm-landing-scroll-cue:hover { background: rgba(255,255,255,0.22); }
@keyframes rm-landing-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* ---- Feature highlights ----
   NB: display:block is explicit so the section is a normal block (title above,
   card grid below). The grid lives on .rm-landing-feature-grid, not here. */
body.realmedia-theme .rm-landing-features {
  display: block;
  padding: 64px 6%;
  max-width: 1400px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.realmedia-theme .rm-landing-features-title {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 36px;
}
/* The card row is the grid — not the section (which also holds the title). */
body.realmedia-theme .rm-landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
body.realmedia-theme .rm-landing-feature {
  background: linear-gradient(160deg, #1d1d1d 0%, #161616 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 28px 24px;
  transition: var(--rm-transition);
}
body.realmedia-theme .rm-landing-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(229,9,20,0.5);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
body.realmedia-theme .rm-landing-feature-icon {
  width: 46px; height: 46px;
  color: var(--rm-primary);
  margin-bottom: 16px;
}
body.realmedia-theme .rm-landing-feature-icon svg { width: 100%; height: 100%; }
body.realmedia-theme .rm-landing-feature h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 8px;
}
body.realmedia-theme .rm-landing-feature p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--rm-text-muted);
  margin: 0;
}

/* ---- Pricing ---- */
/* ---- Landing hero live preview (browser-framed grid of real videos) ---- */
body.realmedia-theme .rm-landing-hero-preview {
  border-radius: 12px;
  overflow: hidden;
  background: #181818;
  border: 1px solid #2a2a2a;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}
body.realmedia-theme .rm-landing-preview-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #202020;
  border-bottom: 1px solid #2a2a2a;
}
body.realmedia-theme .rm-landing-preview-bar > span {
  width: 10px; height: 10px; border-radius: 50%; background: #3a3a3a; flex: 0 0 auto;
}
body.realmedia-theme .rm-landing-preview-bar > span:first-child { background: #e5484d; }
body.realmedia-theme .rm-landing-preview-bar > span:nth-child(2) { background: #f5a623; }
body.realmedia-theme .rm-landing-preview-bar > span:nth-child(3) { background: #35c759; }
body.realmedia-theme .rm-landing-preview-url {
  margin-left: 8px; font-style: normal; font-size: 0.72rem; color: #8a8a8a; letter-spacing: 0.02em;
}
/* Mini replica of the logged-in home page (nav + MOD Uncensored hero + a live
   Trending row of real thumbnails). Sizes are deliberately small/absolute so it
   reads as a scaled-down screenshot at both desktop (~540px) and mobile (~380px). */
body.realmedia-theme .rm-lp-app { background: #141414; overflow: hidden; }
body.realmedia-theme .rm-lp-nav {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
}
body.realmedia-theme .rm-lp-brand { font-size: 0.72rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
body.realmedia-theme .rm-lp-brand b { color: #e50914; font-weight: 800; }
body.realmedia-theme .rm-lp-navlinks { font-size: 0.5rem; color: #9a9a9a; white-space: nowrap; overflow: hidden; }
body.realmedia-theme .rm-lp-avatar { margin-left: auto; width: 13px; height: 13px; border-radius: 50%; background: #e50914; flex: 0 0 auto; }
body.realmedia-theme .rm-lp-hero {
  position: relative; height: 152px;
  background-size: cover; background-position: center 22%; background-repeat: no-repeat;
}
body.realmedia-theme .rm-lp-hero-fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, #141414 5%, rgba(20,20,20,0.1) 55%),
    linear-gradient(to right, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.1) 62%);
}
body.realmedia-theme .rm-lp-hero-body { position: absolute; left: 12px; right: 12px; bottom: 9px; z-index: 2; text-align: left; }
body.realmedia-theme .rm-lp-eyebrow { font-size: 0.46rem; font-weight: 800; letter-spacing: 0.2em; color: #e50914; margin-bottom: 3px; }
body.realmedia-theme .rm-lp-title { font-size: 1.15rem; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.02em; margin-bottom: 5px; text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
body.realmedia-theme .rm-lp-meta { font-size: 0.5rem; color: rgba(255,255,255,0.85); margin-bottom: 6px; }
body.realmedia-theme .rm-lp-meta b { color: #f5c518; font-weight: 700; }
body.realmedia-theme .rm-lp-btns { display: flex; gap: 5px; }
body.realmedia-theme .rm-lp-play { font-size: 0.5rem; font-weight: 700; color: #000; background: #fff; padding: 3px 10px; border-radius: 2px; }
body.realmedia-theme .rm-lp-more { font-size: 0.5rem; font-weight: 600; color: #fff; background: rgba(109,109,110,0.75); padding: 3px 8px; border-radius: 2px; }
body.realmedia-theme .rm-lp-rowlabel { font-size: 0.6rem; font-weight: 700; color: #fff; padding: 9px 12px 5px; }
body.realmedia-theme .rm-lp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 0 12px 12px; }
body.realmedia-theme .rm-lp-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: 3px; overflow: hidden; background: #232323;
}
body.realmedia-theme .rm-lp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.realmedia-theme .rm-lp-thumb.rm-skel {
  background: linear-gradient(90deg, #1f1f1f 25%, #2c2c2c 37%, #1f1f1f 63%);
  background-size: 400% 100%;
  animation: rmSkel 1.4s ease infinite;
}
@keyframes rmSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

body.realmedia-theme .rm-landing-plans {
  padding: 72px 6% 80px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
body.realmedia-theme .rm-landing-section-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
body.realmedia-theme .rm-landing-section-sub {
  color: var(--rm-text-muted);
  font-size: 1.05rem;
  margin: 0 0 44px;
}
body.realmedia-theme .rm-landing-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
body.realmedia-theme .rm-landing-plan {
  position: relative;
  background: linear-gradient(160deg, #1d1d1d 0%, #161616 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 36px 30px 34px;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: var(--rm-transition);
}
body.realmedia-theme .rm-landing-plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
body.realmedia-theme .rm-landing-plan-best {
  border-color: var(--rm-primary);
  box-shadow: 0 0 0 1px rgba(229,9,20,0.4), 0 20px 50px rgba(229,9,20,0.12);
}
body.realmedia-theme .rm-landing-plan-badge {
  position: absolute;
  top: -13px; left: 30px;
  background: var(--rm-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 6px 16px rgba(229,9,20,0.4);
}
body.realmedia-theme .rm-landing-plan-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
  margin-bottom: 10px;
}
body.realmedia-theme .rm-landing-plan-price {
  font-size: 2.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
body.realmedia-theme .rm-landing-plan-price span {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--rm-text-muted);
  margin-left: 4px;
}
body.realmedia-theme .rm-landing-plan-save {
  margin-top: 8px;
  color: #46d369;
  font-size: 0.92rem;
  font-weight: 700;
}
body.realmedia-theme .rm-landing-plan-features {
  list-style: none;
  padding: 0;
  margin: 24px 0 28px;
  flex: 1;
}
body.realmedia-theme .rm-landing-plan-features li {
  position: relative;
  padding: 8px 0 8px 28px;
  font-size: 0.98rem;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
body.realmedia-theme .rm-landing-plan-features li:last-child { border-bottom: none; }
body.realmedia-theme .rm-landing-plan-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--rm-primary);
  font-weight: 800;
}
body.realmedia-theme .rm-landing-plan-best .rm-landing-plan-features li::before { color: #46d369; }
body.realmedia-theme .rm-landing-plan-btn { width: 100%; }
body.realmedia-theme .rm-landing-fineprint {
  margin-top: 34px;
  color: var(--rm-text-muted);
  font-size: 0.95rem;
}
body.realmedia-theme .rm-landing-fineprint a { color: #fff; font-weight: 600; }
body.realmedia-theme .rm-landing-fineprint a:hover { color: var(--rm-primary); }

/* ---- Footer ---- */
body.realmedia-theme .rm-landing-footer {
  padding: 30px 6% 48px;
  text-align: center;
  color: #6a6a6a;
  font-size: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ---- Landing responsive ---- */
@media (max-width: 980px) {
  body.realmedia-theme .rm-landing-feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  body.realmedia-theme .rm-landing-hero { padding: 100px 7% 70px; min-height: 92vh; }
  body.realmedia-theme .rm-landing-cta-row { width: 100%; }
  body.realmedia-theme .rm-landing-btn { flex: 1; padding: 14px 18px; font-size: 1rem; }
  body.realmedia-theme .rm-landing-features { padding: 48px 7%; }
  body.realmedia-theme .rm-landing-feature-grid { grid-template-columns: 1fr; }
  body.realmedia-theme .rm-landing-plan-grid { grid-template-columns: 1fr; }
  body.realmedia-theme .rm-landing-plans { padding: 56px 7% 64px; }
}

/* ---- Scroll-reveal for landing sections ----
   Sections start lifted + faded and settle into place once scrolled into view
   (JS adds .rm-in). A JS failsafe guarantees .rm-in is applied shortly after
   load, so content can never get stuck hidden. */
body.realmedia-theme .rm-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
body.realmedia-theme .rm-reveal.rm-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   PEERTUBE BRANDING REMOVAL + INNER-PAGE DARK THEME
   Durable CSS layer (the JS guard in common.js applies the same
   hides live, without a plugin-CSS reload). Every PeerTube inner
   page — settings, search, history, subscriptions, channels —
   gets the Netflix dark treatment here so nothing shows raw
   upstream defaults.
   ============================================================ */

/* ---- Strip PeerTube promo chrome from the sidebar on EVERY page ---- */
body.realmedia-theme .powered-by,
body.realmedia-theme .more-info-btn-container,
body.realmedia-theme .more-info-btn { display: none !important; }
/* Bootstrap utility class fallbacks for PeerTube sidebar footer links */
body.realmedia-theme a[href*=\"joinpeertube.org\"] { display: none !important; }
body.realmedia-theme div.fs-8 { display: none !important; }

/* ---- Login page: hide federation promo, keep error alerts ---- */
/* Primary alert = "Logging into an account lets you publish content…" promo.
   Danger alerts (login errors, signup-disabled) keep their normal styling. */
body.realmedia-theme my-login .pt-alert-primary { display: none !important; }
body.realmedia-theme my-login .title-page {
  font-size: 2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--rm-text-white) !important;
}
/* PeerTube's real login wrapper classes (the plugin CSS above used a name that
   doesn't exist upstream). Frost the form onto a dark card. */
body.realmedia-theme my-login .login-form-and-externals {
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--rm-border);
  border-radius: 10px;
  padding: 36px 36px 28px;
  max-width: 460px;
}
body.realmedia-theme my-login .login-form-and-externals label { color: rgba(255,255,255,0.8) !important; }
body.realmedia-theme my-login .forgot-password-button,
body.realmedia-theme my-login .button-unstyle.link-primary {
  color: rgba(255,255,255,0.7) !important;
}
body.realmedia-theme my-login .forgot-password-button:hover { color: var(--rm-primary) !important; }

/* ---- Generic dark form controls (settings, search, account, channels) ----
   PeerTube inputs are light by default; recolour them to the Netflix palette.
   Scoped to the realmedia theme so it only ever runs on our skin. */
body.realmedia-theme input[type="text"],
body.realmedia-theme input[type="email"],
body.realmedia-theme input[type="password"],
body.realmedia-theme input[type="search"],
body.realmedia-theme input[type="url"],
body.realmedia-theme input[type="number"],
body.realmedia-theme textarea,
body.realmedia-theme select,
body.realmedia-theme .form-control,
body.realmedia-theme .peertube-input-text,
body.realmedia-theme my-select-options select,
body.realmedia-theme .ng-select .ng-select-container {
  background-color: var(--rm-bg-input) !important;
  border: 1px solid var(--rm-border) !important;
  color: var(--rm-text-white) !important;
  border-radius: 4px !important;
}
body.realmedia-theme input:focus,
body.realmedia-theme textarea:focus,
body.realmedia-theme select:focus,
body.realmedia-theme .form-control:focus {
  border-color: rgba(255,255,255,0.6) !important;
  outline: none !important;
  box-shadow: none !important;
}
body.realmedia-theme input::placeholder,
body.realmedia-theme textarea::placeholder { color: var(--rm-text-muted) !important; }

/* ---- ACCOUNT / SETTINGS pages — section cards on dark ---- */
body.realmedia-theme .pt-two-cols {
  border-bottom: 1px solid var(--rm-border) !important;
  padding-bottom: 28px;
}
/* NB: :not(.rm-native-admin) — these dark account/settings headings share
   PeerTube's .pt-two-cols/.title-col layout classes with the LIGHT admin
   config pages. Without the guard, `.pt-two-cols .title-col h2` (0,3,2)
   outranks the admin restore's plain `h2` (0,2,2) and repaints the admin
   config section headings white-on-white. Excluding admin keeps the dark
   copy on account pages while letting the admin block win on /admin. */
body.realmedia-theme:not(.rm-native-admin) .pt-two-cols .title-col h2,
body.realmedia-theme .title-page,
body.realmedia-theme .account-title,
body.realmedia-theme .settings-big-title {
  color: var(--rm-text-white) !important;
  letter-spacing: 0.02em;
}
body.realmedia-theme:not(.rm-native-admin) .pt-two-cols .title-col p,
body.realmedia-theme .form-group-description,
body.realmedia-theme .muted,
body.realmedia-theme .text-muted { color: var(--rm-text-muted) !important; }
/* Translation-help / docs promo links inside settings descriptions */
body.realmedia-theme .form-group-description a[href*="joinpeertube"],
body.realmedia-theme .form-group-description a[href*="github.com/Chocobozzz"],
body.realmedia-theme my-user-video-settings a[href*="docs.joinpeertube"] {
  display: none !important;
}
body.realmedia-theme my-account-settings,
body.realmedia-theme my-my-account,
body.realmedia-theme .sub-menu + .margin-content,
body.realmedia-theme .root-content { background: transparent !important; }

/* PeerTube's account/settings host elements are bare custom elements that
   default to display:inline, which collapses the whole settings column to
   height 0 (the "blank settings page" bug). Force block layout so the native
   content lays out under the Netflix nav, independent of Angular mount timing. */
body.realmedia-theme my-account,
body.realmedia-theme my-account-settings,
body.realmedia-theme my-account-notifications,
body.realmedia-theme my-account-applications,
body.realmedia-theme my-account-blocklist,
body.realmedia-theme my-account-history { display: block !important; }

/* ---- SEARCH page — dark results + channel rows ---- */
body.realmedia-theme .search-result { background: transparent !important; color: var(--rm-text-white) !important; }
body.realmedia-theme .results-header { border-bottom: 1px solid var(--rm-border) !important; }
body.realmedia-theme .results-counter,
body.realmedia-theme .results-counter span { color: var(--rm-text-muted) !important; }
body.realmedia-theme .filter-button {
  background: var(--rm-bg-input) !important;
  border: 1px solid var(--rm-border) !important;
  color: var(--rm-text-white) !important;
  border-radius: 4px !important;
}
body.realmedia-theme .filter-button:hover { background: #3a3a3a !important; }
body.realmedia-theme .entry.video-channel {
  background: var(--rm-bg-card) !important;
  border: 1px solid var(--rm-border) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}
body.realmedia-theme .video-channel-display-name,
body.realmedia-theme .video-channel-name { color: var(--rm-text-white) !important; }
body.realmedia-theme .video-channel-followers { color: var(--rm-text-muted) !important; }

/* ---- Generic inner-page surfaces (history, playlists, subscriptions,
   notifications, channels) — keep cards/menus on the dark palette ---- */
body.realmedia-theme .sub-menu {
  background: rgba(0,0,0,0.4) !important;
  border-bottom: 1px solid var(--rm-border) !important;
}
body.realmedia-theme .sub-menu .title-page { color: var(--rm-text-white) !important; }
body.realmedia-theme .card,
body.realmedia-theme .pt-card,
body.realmedia-theme .playlist,
body.realmedia-theme .video-channel {
  background: var(--rm-bg-card) !important;
  border-color: var(--rm-border) !important;
  color: var(--rm-text-white) !important;
}
/* Empty-state copy (e.g. history "no results") shouldn't be black-on-dark */
body.realmedia-theme .no-results,
body.realmedia-theme .empty-box { color: var(--rm-text-muted) !important; }

/* ============================================================
   ADMIN DASHBOARD — opt OUT of the Netflix dark skin (product decision).
   The admin area is PeerTube's native Angular UI; re-skinning every admin
   surface dark is fragile and was leaving white text on PeerTube's light
   admin surfaces (illegible). On /admin we instead restore PeerTube's
   standard light palette and undo our global dark form/card recolouring,
   so the dashboard is fully legible. The Netflix top-nav strip stays for a
   way back. Body gets .rm-native-admin from common.js on admin routes.
   Higher specificity (two classes) overrides the dark-theme rules above.
   ============================================================ */
body.realmedia-theme.rm-native-admin,
body.realmedia-theme.rm-native-admin my-app,
body.realmedia-theme.rm-native-admin main.main-col,
body.realmedia-theme.rm-native-admin .main-col,
body.realmedia-theme.rm-native-admin .root-content,
body.realmedia-theme.rm-native-admin .sub-menu {
  background-color: #fff !important;
  color: #1a1a1a !important;
}
/* Undo the global dark recolour of form controls + cards on admin pages. */
body.realmedia-theme.rm-native-admin input[type="text"],
body.realmedia-theme.rm-native-admin input[type="email"],
body.realmedia-theme.rm-native-admin input[type="password"],
body.realmedia-theme.rm-native-admin input[type="search"],
body.realmedia-theme.rm-native-admin input[type="url"],
body.realmedia-theme.rm-native-admin input[type="number"],
body.realmedia-theme.rm-native-admin textarea,
body.realmedia-theme.rm-native-admin select,
body.realmedia-theme.rm-native-admin .form-control,
body.realmedia-theme.rm-native-admin .peertube-input-text,
body.realmedia-theme.rm-native-admin .ng-select .ng-select-container,
body.realmedia-theme.rm-native-admin .card,
body.realmedia-theme.rm-native-admin .pt-card {
  background-color: #fff !important;
  color: #1a1a1a !important;
  border-color: #c6c6c6 !important;
}
/* Headings, labels, muted copy, links → legible on the light surface. */
body.realmedia-theme.rm-native-admin h1,
body.realmedia-theme.rm-native-admin h2,
body.realmedia-theme.rm-native-admin h3,
body.realmedia-theme.rm-native-admin h4,
body.realmedia-theme.rm-native-admin label,
body.realmedia-theme.rm-native-admin .title-page,
body.realmedia-theme.rm-native-admin .account-title,
body.realmedia-theme.rm-native-admin .settings-big-title,
/* Config/settings section headings live in .pt-two-cols .title-col; match that
   depth (0,4,2) so we beat the account rule's .pt-two-cols .title-col h2. */
body.realmedia-theme.rm-native-admin .pt-two-cols .title-col h2,
body.realmedia-theme.rm-native-admin .pt-two-cols .title-col h3 {
  color: #1a1a1a !important;
}
body.realmedia-theme.rm-native-admin .text-muted,
body.realmedia-theme.rm-native-admin .muted,
body.realmedia-theme.rm-native-admin .form-group-description,
body.realmedia-theme.rm-native-admin .pt-two-cols .title-col p {
  color: #585858 !important;
}
body.realmedia-theme.rm-native-admin a,
body.realmedia-theme.rm-native-admin a:visited {
  color: #155af4 !important;
}
body.realmedia-theme.rm-native-admin a:hover { color: #0b3fb8 !important; }
/* Buttons: the global dark-skin rules above paint secondary/action buttons
   with translucent-white backgrounds + white text, which is illegible on the
   restored light admin surfaces (e.g. Save when editing a thumbnail). Restore
   a legible light-grey button palette; primary stays brand-red with white text. */
body.realmedia-theme.rm-native-admin .btn,
body.realmedia-theme.rm-native-admin .button,
body.realmedia-theme.rm-native-admin .action-button,
body.realmedia-theme.rm-native-admin .btn-secondary,
body.realmedia-theme.rm-native-admin .grey-button,
body.realmedia-theme.rm-native-admin .peertube-button-link,
body.realmedia-theme.rm-native-admin button.dropdown-item,
body.realmedia-theme.rm-native-admin .dropdown-item {
  background-color: #f2f2f2 !important;
  color: #1a1a1a !important;
  border: 1px solid #c6c6c6 !important;
  backdrop-filter: none !important;
}
body.realmedia-theme.rm-native-admin .btn:hover,
body.realmedia-theme.rm-native-admin .button:hover,
body.realmedia-theme.rm-native-admin .action-button:hover,
body.realmedia-theme.rm-native-admin .btn-secondary:hover,
body.realmedia-theme.rm-native-admin .grey-button:hover,
body.realmedia-theme.rm-native-admin .peertube-button-link:hover,
body.realmedia-theme.rm-native-admin .dropdown-item:hover {
  background-color: #e2e2e2 !important;
  color: #000 !important;
}
body.realmedia-theme.rm-native-admin .btn-primary,
body.realmedia-theme.rm-native-admin .peertube-button,
body.realmedia-theme.rm-native-admin .btn.btn-primary,
body.realmedia-theme.rm-native-admin .orange-button {
  background-color: var(--rm-primary) !important;
  color: #fff !important;
  border: none !important;
}
/* Icon-only buttons (table row actions, close X) need dark glyphs too. */
body.realmedia-theme.rm-native-admin .btn my-global-icon,
body.realmedia-theme.rm-native-admin .action-button my-global-icon,
body.realmedia-theme.rm-native-admin button.close,
body.realmedia-theme.rm-native-admin .btn-close {
  color: #1a1a1a !important;
  fill: #1a1a1a !important;
}
/* Tables + dropdown menus on light admin surfaces. */
body.realmedia-theme.rm-native-admin table,
body.realmedia-theme.rm-native-admin .p-datatable,
body.realmedia-theme.rm-native-admin .p-datatable .p-datatable-tbody > tr,
body.realmedia-theme.rm-native-admin .p-datatable .p-datatable-thead > tr > th,
body.realmedia-theme.rm-native-admin .dropdown-menu {
  background-color: #fff !important;
  color: #1a1a1a !important;
}

/* ============================================================
   MOBILE — make the admin area and the native upload page usable
   from a phone browser (staff manage comments + upload on the go).
   ============================================================ */
@media (max-width: 767px) {
  /* Admin: horizontal sub-menus scroll instead of overflowing off-screen. */
  body.realmedia-theme.rm-native-admin .sub-menu,
  body.realmedia-theme.rm-native-admin .admin-sub-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }
  /* Admin: wide tables scroll inside their own container. */
  body.realmedia-theme.rm-native-admin .p-datatable,
  body.realmedia-theme.rm-native-admin .p-datatable-wrapper,
  body.realmedia-theme.rm-native-admin table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Comfortable tap targets on admin + upload actions. */
  body.realmedia-theme.rm-native-admin .btn,
  body.realmedia-theme.rm-native-admin .peertube-button,
  body.realmedia-theme.rm-native-admin .action-button,
  body.realmedia-theme .upload-video-container .btn,
  body.realmedia-theme .upload-video-container .peertube-button {
    min-height: 40px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  /* Upload page: let the form stack and never overflow the viewport. */
  body.realmedia-theme .upload-video-container,
  body.realmedia-theme my-videos-add,
  body.realmedia-theme my-video-edit {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  body.realmedia-theme my-video-edit .video-edit,
  body.realmedia-theme .upload-video-container form {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  body.realmedia-theme my-video-edit .col-video-edit,
  body.realmedia-theme my-video-edit [class*="col-md"],
  body.realmedia-theme my-video-edit [class*="col-xl"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ---- Honour reduced-motion: kill ambient + entrance animations ---- */
@media (prefers-reduced-motion: reduce) {
  body.realmedia-theme .hero-banner,
  body.realmedia-theme .rm-landing-hero,
  body.realmedia-theme .rm-landing-hero-inner > *,
  body.realmedia-theme .rm-landing-scroll-cue,
  body.realmedia-theme .rm-category-row {
    animation: none !important;
  }
  body.realmedia-theme .rm-card,
  body.realmedia-theme .rm-card-thumb img { transition: none !important; }
  /* Never animate-hide content for reduced-motion users. */
  body.realmedia-theme .rm-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}