/* ============================================
   On+ Play — PREMIUM PASS (loaded LAST)
   Refines onplay-shell.css for a content-first,
   restrained, cinematic feel + adds video watermark.
   ============================================ */

/* ── HEADER — lighter, more breathable ────────────────── */
#playerScreen .app-header {
  height: 68px !important;
  padding: 0 32px !important;
  background: linear-gradient(180deg, rgba(8,8,15,0.75) 0%, rgba(8,8,15,0.45) 80%, transparent 100%) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: none !important;
}
#playerScreen .header-content { gap: 24px !important; }

#playerScreen .user-info {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--text-tertiary) !important;
  letter-spacing: 0.1px;
}
#playerScreen .btn-logout {
  background: transparent !important;
  border: none !important;
  color: var(--text-tertiary) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  letter-spacing: 0.2px;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
#playerScreen .btn-logout:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

/* ── MAIN LAYOUT — slimmer sidebar ────────────────────── */
#playerScreen .main-content {
  grid-template-columns: 320px 1fr !important;
}

/* ── SIDEBAR — less visual weight ─────────────────────── */
#playerScreen .sidebar {
  background: rgba(8,8,15,0.55) !important;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border-right: 1px solid rgba(255,255,255,0.04) !important;
  height: calc(100vh - 68px);
  top: 68px;
}
#playerScreen .sidebar-header {
  padding: 22px 22px 14px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
/* Drop the redundant "CONTEÚDO" heading */
#playerScreen .sidebar-header h3 { display: none !important; }

/* ── CATEGORY TABS — refined, lighter ─────────────────── */
#playerScreen .category-tabs {
  gap: 4px !important;
  margin-bottom: 14px !important;
}
#playerScreen .category-tab {
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--text-tertiary) !important;
  letter-spacing: 0 !important;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out) !important;
}
#playerScreen .category-tab:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-primary) !important;
  border: none !important;
  transform: none !important;
}
#playerScreen .category-tab[aria-selected="true"],
#playerScreen .category-tab.active {
  background: linear-gradient(90deg, rgba(107,45,143,0.22) 0%, rgba(255,138,28,0.06) 100%) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 2px 0 0 var(--brand-purple-500), inset 0 0 0 1px rgba(139,63,184,0.18) !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: 600 !important;
}

/* ── SEARCH — flat, minimal ───────────────────────────── */
#playerScreen .search-box input {
  height: 40px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  padding: 0 38px 0 14px !important;
}
#playerScreen .search-box input:hover {
  background: rgba(255,255,255,0.06) !important;
}
#playerScreen .search-box input:focus {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(139,63,184,0.45) !important;
  box-shadow: 0 0 0 3px rgba(139,63,184,0.15) !important;
}

/* ── CHANNEL LIST ─────────────────────────────────────── */
#playerScreen .channel-list {
  padding: 12px 14px !important;
}
#playerScreen .category-section-header {
  font-size: 10.5px !important;
  letter-spacing: 1.4px !important;
  color: rgba(255,255,255,0.32) !important;
  padding: 16px 4px 10px !important;
}

/* ── CHANNEL ITEM — lighter active state ──────────────── */
#playerScreen .channel-item {
  padding: 9px 10px !important;
  margin-bottom: 2px !important;
  border-radius: 8px !important;
  border: none !important;
  gap: 12px !important;
}
#playerScreen .channel-item::before {
  left: -4px !important;
  width: 2px !important;
  top: 12px !important;
  bottom: 12px !important;
}
#playerScreen .channel-item:hover {
  background: rgba(255,255,255,0.04) !important;
  border: none !important;
}
#playerScreen .channel-item.active {
  background: linear-gradient(90deg, rgba(107,45,143,0.18) 0%, rgba(107,45,143,0.05) 60%, transparent 100%) !important;
  border: none !important;
  box-shadow: none !important;
}
#playerScreen .channel-item.active::before {
  opacity: 1 !important;
  width: 2px !important;
  background: var(--brand-gradient) !important;
}
#playerScreen .channel-item .channel-logo {
  width: 40px !important;
  height: 40px !important;
  border-radius: 6px !important;
  border: none !important;
}
#playerScreen .channel-item .channel-info h4 {
  font-size: 13px !important;
  font-weight: 500 !important;
}
#playerScreen .channel-item.active .channel-info h4 {
  font-weight: 600 !important;
}
#playerScreen .channel-item .channel-info p {
  font-size: 11px !important;
  color: rgba(255,255,255,0.45) !important;
}

/* ── PLAYER CONTAINER — generous spacing ──────────────── */
#playerScreen .player-container {
  padding: 28px 32px !important;
  gap: 18px !important;
  display: flex !important;
  flex-direction: column;
}

/* ── VIDEO WRAPPER — softer surface ───────────────────── */
#playerScreen .video-wrapper {
  position: relative !important;
  overflow: hidden;
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 48px rgba(0,0,0,0.55),
    0 6px 16px rgba(0,0,0,0.35);
}

/* ── WATERMARK — logo at bottom-left of player ──────────
   Always visible (placeholder OR playing). Sits above the
   video.js control bar so it doesn't get covered.
   ──────────────────────────────────────────────────────── */
#playerScreen .video-wrapper::after {
  content: "";
  position: absolute !important;
  bottom: 64px !important;       /* above the video.js controls bar */
  left: 18px !important;
  right: auto !important;
  top: auto !important;
  width: 96px !important;
  height: 36px !important;
  background: var(--brand-logo-url, url("logo.svg")) left center / contain no-repeat !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
  z-index: 999 !important;       /* above everything inside the wrapper */
  filter:
    drop-shadow(0 2px 8px rgba(0,0,0,0.75))
    drop-shadow(0 0 14px rgba(255,138,28,0.18)) !important;
  transition: opacity 400ms var(--ease-out) !important;
  display: block !important;
}
/* Slightly dim when user is hovering (so controls stand out) */
#playerScreen .video-wrapper:hover::after {
  opacity: 0.40 !important;
}

/* ── NOW PLAYING — minimal ────────────────────────────── */
#playerScreen .now-playing {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  padding-top: 16px !important;
}
#playerScreen .live-badge {
  background: rgba(255, 59, 59, 0.92) !important;
  font-size: 9.5px !important;
  letter-spacing: 1.2px !important;
  padding: 3px 8px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  /* keep the subtle pulse */
}
#playerScreen .live-badge::before {
  width: 5px !important;
  height: 5px !important;
}
#playerScreen #channelName {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;
  color: var(--text-primary) !important;
}

/* ── PLAYER PLACEHOLDER — cinematic ───────────────────── */
#playerScreen .player-placeholder {
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(107,45,143,0.18), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(139,63,184,0.06), transparent 80%),
    #08080F !important;
}
#playerScreen .placeholder-icon {
  color: var(--brand-purple-400) !important;
  opacity: 0.6 !important;
  width: 64px !important;
  height: 64px !important;
}
#playerScreen .player-placeholder p {
  font-size: 13px !important;
  color: rgba(255,255,255,0.45) !important;
  font-weight: 400 !important;
  letter-spacing: 0.2px;
}

/* ── LOADING SPINNER → branded logomark ─────────────────
   Replace the default video.js spinner (border circle) with
   the On+ Play logomark, pulsing inside a thin rotating ring.
   ──────────────────────────────────────────────────────── */
#playerScreen .video-js .vjs-loading-spinner {
  /* Kill default border-circle spinner */
  border: none !important;
  background: var(--brand-logo-url, url("logo.svg")) center / 65% no-repeat !important;
  width: 96px !important;
  height: 96px !important;
  margin: -48px 0 0 -48px !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: onplay-loader-pulse 1.5s cubic-bezier(.65,0,.35,1) infinite !important;
  filter: drop-shadow(0 4px 14px rgba(255,138,28,0.55))
          drop-shadow(0 0 24px rgba(255,138,28,0.30));
}
/* Default video.js uses ::before & ::after for the spinning border;
   repurpose them as a single gradient halo ring around the logo. */
#playerScreen .video-js .vjs-loading-spinner::before,
#playerScreen .video-js .vjs-loading-spinner::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  animation: none !important;
}
#playerScreen .video-js .vjs-loading-spinner::before {
  border-top-color: var(--brand-orange-500) !important;
  border-right-color: var(--brand-purple-500) !important;
  animation: onplay-loader-ring 1.2s linear infinite !important;
}
#playerScreen .video-js .vjs-loading-spinner::after {
  border-bottom-color: rgba(255,138,28,0.35) !important;
  border-left-color: rgba(139,63,184,0.35) !important;
  inset: 6px !important;
  animation: onplay-loader-ring 1.8s linear infinite reverse !important;
}

@keyframes onplay-loader-pulse {
  0%, 100% {
    transform: scale(0.92);
    filter: drop-shadow(0 3px 12px rgba(255,138,28,0.45))
            drop-shadow(0 0 18px rgba(255,138,28,0.20));
  }
  50% {
    transform: scale(1.04);
    filter: drop-shadow(0 6px 20px rgba(255,138,28,0.85))
            drop-shadow(0 0 36px rgba(255,138,28,0.40))
            drop-shadow(0 0 60px rgba(139,63,184,0.20));
  }
}
@keyframes onplay-loader-ring {
  to { transform: rotate(360deg); }
}

/* Sidebar's loading spinner (for channel list "Carregando...") gets
   a smaller version of the same treatment for consistency. */
#playerScreen .channel-list .loading-spinner .spinner {
  border: 2px solid transparent !important;
  border-top-color: var(--brand-orange-500) !important;
  border-right-color: var(--brand-purple-500) !important;
  width: 36px !important;
  height: 36px !important;
  animation: onplay-loader-ring 1s linear infinite !important;
}

/* Also: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #playerScreen .video-js .vjs-loading-spinner,
  #playerScreen .video-js .vjs-loading-spinner::before,
  #playerScreen .video-js .vjs-loading-spinner::after,
  #playerScreen .channel-list .loading-spinner .spinner {
    animation: none !important;
  }
}

/* ── VIDEO.JS — refine controls polish ────────────────── */
#playerScreen .video-js .vjs-control-bar {
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.92) 100%) !important;
  height: 56px !important;
  padding: 0 12px;
}
#playerScreen .video-js .vjs-big-play-button {
  width: 86px !important;
  height: 86px !important;
  line-height: 86px !important;
  font-size: 38px;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(20,20,30,0.65) !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 60px rgba(107,45,143,0.35);
}
#playerScreen .video-js:hover .vjs-big-play-button {
  background: var(--brand-gradient) !important;
  border-color: transparent !important;
  box-shadow: 0 16px 44px rgba(107,45,143,0.55), 0 0 80px rgba(255,138,28,0.30);
}

/* ── MOBILE polish ────────────────────────────────────── */
@media (max-width: 900px) {
  #playerScreen .app-header { padding: 0 18px !important; }
  #playerScreen .player-container { padding: 16px !important; }
  #playerScreen .video-wrapper::after {
    width: 72px;
    height: 28px;
    bottom: 60px;
    left: 12px;
  }
}