/*
  Piratenkanjers hoofdsite - directe livebadge uit /verzoeken zonder iframe.
  Alleen scoped op .pk-header-live-direct, zodat de verzoeken-CSS de hoofdsite niet omver trekt.
*/

.pk-header-live-direct {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  background: transparent !important;
  overflow: visible !important;
  line-height: normal;
  flex: 0 0 auto;
  min-width: 250px;
}

.pk-header-live-direct,
.pk-header-live-direct * {
  box-sizing: border-box;
}

.pk-header-live-direct .header-live-badge {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 250px;
  max-width: 360px;
  padding: 10px 14px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 18px;
  background: rgba(8, 19, 33, .72);
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

.pk-header-live-direct .header-live-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  left: -160%;
  width: 150%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.07) 28%,
    rgba(255,255,255,.38) 42%,
    rgba(255,255,255,.07) 58%,
    transparent 72%);
  transform: skewX(-20deg);
  mix-blend-mode: screen;
  animation: pkHeaderSweep 5.5s ease-in-out infinite;
}

.pk-header-live-direct .header-live-badge:hover::after {
  animation-duration: 3.2s;
}

.pk-header-live-direct .header-live-badge.is-live {
  border-color: rgba(34, 197, 94, .35);
}

.pk-header-live-direct .header-live-badge.is-jukebox,
.pk-header-live-direct .header-live-badge.live-style-jukebox {
  border-color: rgba(148, 163, 184, .34);
  box-shadow: none;
}

.pk-header-live-direct .pk-header-live-media-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 86px;
  height: 86px;
  overflow: visible;
}

.pk-header-live-direct .header-live-img {
  width: 86px;
  height: 86px;
  min-width: 86px;
  min-height: 86px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid #ffd700;
  background: #020817;
  flex: 0 0 auto;
}

.pk-header-live-direct .avatar-frame-wrap.header-live-img,
.pk-header-live-direct .avatar-frame-wrap.avatar-frame-header {
  position: relative;
  width: 86px;
  height: 86px;
  min-width: 86px;
  min-height: 86px;
  display: inline-flex;
  overflow: hidden;
  border-radius: 14px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pk-header-live-direct .avatar-frame-wrap.header-live-img .avatar-frame-photo,
.pk-header-live-direct .avatar-frame-wrap.avatar-frame-header .avatar-frame-photo {
  position: absolute;
  inset: 13%;
  width: 74%;
  height: 74%;
  object-fit: cover;
  border-radius: 11px;
  background: #020817;
  z-index: 2;
}

.pk-header-live-direct .avatar-frame-wrap.header-live-img .avatar-frame-overlay,
.pk-header-live-direct .avatar-frame-wrap.avatar-frame-header .avatar-frame-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 4;
  pointer-events: none;
}

.pk-header-live-direct .header-live-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pk-header-live-direct .header-live-status {
  color: #22c55e;
  font-weight: 900;
  font-size: 13px;
}

.pk-header-live-direct .header-live-badge.is-jukebox .header-live-status {
  color: #ffd700;
}

.pk-header-live-direct .header-live-name {
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Livebadge-stijlen zoals in /verzoeken */
.pk-header-live-direct .header-live-badge.live-style-glow.is-live {
  animation: pkHeaderPulse 2.2s ease-in-out infinite;
  border-color: rgba(255, 215, 0, .58);
  box-shadow: 0 0 26px rgba(217, 22, 104, .18);
}

.pk-header-live-direct .header-live-badge.live-style-equalizer {
  border-color: rgba(34, 211, 238, .65);
}

.pk-header-live-direct .header-live-badge.live-style-equalizer .live-eq {
  display: inline-flex;
  gap: 3px;
  align-items: end;
  margin-left: auto;
  flex: 0 0 auto;
}

.pk-header-live-direct .header-live-badge.live-style-equalizer .live-eq i {
  display: block;
  width: 4px;
  height: 14px;
  border-radius: 4px;
  background: #22d3ee;
  animation: pkEq 1s ease-in-out infinite;
}

.pk-header-live-direct .header-live-badge.live-style-equalizer .live-eq i:nth-child(2) {
  animation-delay: .18s;
  height: 22px;
}

.pk-header-live-direct .header-live-badge.live-style-equalizer .live-eq i:nth-child(3) {
  animation-delay: .32s;
  height: 17px;
}

.pk-header-live-direct .header-live-badge.live-style-neon {
  border-color: rgba(236, 72, 153, .8);
  box-shadow: 0 0 18px rgba(236,72,153,.34), inset 0 0 18px rgba(34,211,238,.08);
}

.pk-header-live-direct .header-live-badge.live-style-neon::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid rgba(34, 211, 238, .55);
  pointer-events: none;
  animation: pkNeon 1.7s ease-in-out infinite;
}

.pk-header-live-direct .header-live-badge.live-style-compact {
  min-width: 230px;
  max-width: 320px;
  padding: 9px 13px;
  border-radius: 999px;
}

.pk-header-live-direct .header-live-badge.live-style-compact .pk-header-live-media-slot,
.pk-header-live-direct .header-live-badge.live-style-compact .header-live-img,
.pk-header-live-direct .header-live-badge.live-style-compact .avatar-frame-wrap.header-live-img,
.pk-header-live-direct .header-live-badge.live-style-compact .avatar-frame-wrap.avatar-frame-header {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
}

.pk-header-live-direct .header-live-badge.live-style-compact .header-live-name {
  font-size: 15px;
}

.pk-header-live-direct .header-live-badge.live-style-spotlight {
  border-color: rgba(255, 215, 0, .75);
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.18), transparent 24%),
    linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(30, 0, 40, .96));
}

.pk-header-live-direct .header-live-badge.live-style-spotlight .live-spark {
  position: absolute;
  top: -40%;
  left: -30%;
  width: 40%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: rotate(18deg);
  animation: pkSpot 3.2s ease-in-out infinite;
  pointer-events: none;
}

.pk-header-live-direct [hidden] {
  display: none !important;
}

/* Naam-effecten compact voor de header */
.pk-header-live-direct .dj-name-effect {
  display: inline-block;
  font-weight: 900;
}

.pk-header-live-direct .dj-name-effect-neon {
  text-shadow: 0 0 5px currentColor, 0 0 12px currentColor, 0 0 22px rgba(255,255,255,.22);
}

.pk-header-live-direct .dj-name-effect-soft-glow {
  text-shadow: 0 0 8px currentColor, 0 0 18px rgba(255,255,255,.14);
}

.pk-header-live-direct .dj-name-effect-sparkle::after {
  content: " ✦";
  font-size: .72em;
  color: currentColor;
  opacity: .82;
  animation: pkNameSparkle 1.8s ease-in-out infinite;
}

.pk-header-live-direct .dj-name-effect-rainbow {
  background: linear-gradient(90deg, #ffd700, #22c55e, #38bdf8, #d91668, #ffd700);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: pkNameRainbow 4s linear infinite;
  text-shadow: 0 0 18px rgba(255,215,0,.22);
}

.pk-header-live-direct .dj-name-effect-shine {
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
}

.pk-header-live-direct .dj-name-effect-shine::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -80%;
  width: 55%;
  height: 170%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent);
  transform: rotate(18deg);
  animation: pkNameShine 3.4s ease-in-out infinite;
  pointer-events: none;
}

.pk-header-live-direct .dj-name-effect-gold-pulse {
  color: #ffd700 !important;
  text-shadow: 0 0 7px rgba(255,215,0,.75), 0 0 18px rgba(255,176,0,.38);
  animation: pkNameGoldPulse 1.8s ease-in-out infinite;
}

.pk-header-live-direct .dj-name-effect-ice {
  color: #7dd3fc !important;
  text-shadow: 0 0 6px rgba(125,211,252,.9), 0 0 18px rgba(56,189,248,.48), 0 0 28px rgba(255,255,255,.18);
}

.pk-header-live-direct .dj-name-effect-fire {
  color: #fb923c !important;
  text-shadow: 0 0 6px rgba(251,146,60,.9), 0 0 16px rgba(239,68,68,.52), 0 0 28px rgba(255,215,0,.22);
  animation: pkNameFire 1.2s ease-in-out infinite alternate;
}

@keyframes pkHeaderSweep {
  0% { left: -160%; opacity: 0; }
  8% { opacity: .95; }
  42% { left: 110%; opacity: .55; }
  46% { opacity: 0; }
  100% { left: 110%; opacity: 0; }
}

@keyframes pkHeaderPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(217,22,104,.16), 0 0 0 rgba(255,215,0,0); }
  50% { box-shadow: 0 0 34px rgba(217,22,104,.36), 0 0 18px rgba(255,215,0,.18); }
}

@keyframes pkEq {
  0%, 100% { transform: scaleY(.5); opacity: .55; }
  50% { transform: scaleY(1.25); opacity: 1; }
}

@keyframes pkNeon {
  0%, 100% { opacity: .32; }
  50% { opacity: 1; }
}

@keyframes pkSpot {
  0% { left: -45%; opacity: 0; }
  20% { opacity: .95; }
  55% { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

@keyframes pkNameSparkle {
  0%, 100% { opacity: .35; transform: translateY(0) scale(.9); }
  50% { opacity: 1; transform: translateY(-1px) scale(1.15); }
}

@keyframes pkNameRainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 280% 50%; }
}

@keyframes pkNameShine {
  0% { left: -80%; opacity: 0; }
  18% { opacity: .9; }
  42% { left: 130%; opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

@keyframes pkNameGoldPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

@keyframes pkNameFire {
  0% { text-shadow: 0 0 5px rgba(251,146,60,.8), 0 0 14px rgba(239,68,68,.45); }
  100% { text-shadow: 0 0 8px rgba(255,215,0,.85), 0 0 22px rgba(239,68,68,.65); }
}

@media (max-width: 700px) {
  .pk-header-live-direct {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .pk-header-live-direct .header-live-badge {
    width: min(100%, 360px);
    max-width: 360px;
  }
}

@media (max-width: 520px) {
  .pk-header-live-direct .pk-header-live-media-slot,
  .pk-header-live-direct .header-live-img,
  .pk-header-live-direct .avatar-frame-wrap.header-live-img,
  .pk-header-live-direct .avatar-frame-wrap.avatar-frame-header {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
  }
}