/* PHSPB Recommended Streams WOW — isolated model-page presentation layer.
 * Scope is intentionally limited to the model-page recommendation fragment.
 * No home, feed, cache, data, pagination or live-source rules live here.
 * Intentionally no thumbnail sweep overlay: it can read as a dark scan line over live previews. */

.phspb-recommended-streams .phspb-recommended-fast {
  position: relative;
  isolation: isolate;
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-recommended-header {
  align-items: flex-start !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-section-title {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 10px !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(20px, 1.55vw, 25px) !important;
  font-weight: 820 !important;
  letter-spacing: -.025em !important;
  line-height: 1.08 !important;
  text-transform: none !important;
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-section-title::after {
  content: 'Live rooms selected for you right now';
  display: block;
  flex: 0 0 100%;
  margin: 7px 0 0 18px;
  color: rgba(219, 203, 250, .62);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.35;
  text-transform: none;
}

.phspb-recommended-streams .phspb-recommended-fast .phspb-recommended-source-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 28px !important;
  padding: 6px 11px !important;
  border: 1px solid rgba(210, 165, 255, .24) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(116, 61, 178, .19), rgba(251, 74, 134, .07)) !important;
  color: rgba(246, 237, 255, .9) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.phspb-recommended-streams .phspb-recommended-fast .phspb-recommended-source-label::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fb4a86;
  box-shadow: 0 0 0 3px rgba(251, 74, 134, .11), 0 0 10px rgba(251, 74, 134, .35);
  content: '';
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-card {
  position: relative !important;
  overflow: hidden !important;
  border-color: rgba(175, 124, 244, .17) !important;
  background: linear-gradient(180deg, rgba(61, 24, 96, .73), rgba(22, 8, 41, .96)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 10px 22px rgba(0, 0, 0, .18) !important;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), border-color 320ms ease, box-shadow 320ms ease !important;
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-thumb-wrap {
  position: relative !important;
  isolation: isolate;
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-thumb {
  transition: transform 360ms cubic-bezier(.2,.8,.2,1), opacity 260ms ease !important;
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-card-body {
  background: linear-gradient(180deg, rgba(20, 7, 36, .02), rgba(20, 7, 36, .24)) !important;
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-name-link {
  transition: color 260ms ease, text-shadow 260ms ease !important;
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-home-metric-followers {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 4px 8px !important;
  border: 1px solid rgba(220, 181, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  color: rgba(243, 232, 255, .88);
  transition: border-color 260ms ease, background-color 260ms ease, transform 260ms ease;
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-home-metric-followers::before {
  display: inline-grid;
  width: 13px;
  height: 13px;
  place-items: center;
  color: #ff7caf;
  content: '♥';
  font-size: 12px;
  line-height: 1;
  transform-origin: center;
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-home-metric-followers strong,
.phspb-recommended-streams .phspb-recommended-fast .phlc-home-metric-followers small {
  color: inherit !important;
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-home-metric-followers small {
  margin-left: 3px;
  color: rgba(232, 217, 252, .7) !important;
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-badge-live {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-color: rgba(255, 102, 151, .48) !important;
  background: rgba(222, 31, 88, .92) !important;
  box-shadow: 0 5px 12px rgba(113, 11, 45, .24) !important;
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-badge-live > span {
  width: 6px !important;
  height: 6px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.17) !important;
}

.phspb-recommended-streams .phspb-recommended-fast.phspb-related-wow-ready .phlc-recommended-header,
.phspb-recommended-streams .phspb-recommended-fast.phspb-related-wow-ready .phspb-related-wow-card {
  opacity: 0;
  transform: translateY(14px);
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-recommended-header.is-phspb-related-wow-visible,
.phspb-recommended-streams .phspb-recommended-fast .phspb-related-wow-card.is-phspb-related-wow-visible {
  opacity: 1;
  transform: translateY(0);
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-recommended-header {
  transition: opacity 600ms cubic-bezier(.2,.8,.2,1), transform 600ms cubic-bezier(.2,.8,.2,1) !important;
}

.phspb-recommended-streams .phspb-recommended-fast .phspb-related-wow-card {
  transition: opacity 650ms cubic-bezier(.2,.8,.2,1), transform 650ms cubic-bezier(.2,.8,.2,1), border-color 320ms ease, box-shadow 320ms ease !important;
  transition-delay: var(--phspb-related-wow-delay, 0ms) !important;
}

.phspb-recommended-streams .phspb-recommended-fast .phspb-related-wow-card.is-phspb-related-wow-visible .phlc-home-metric-followers::before {
  animation: phspb-related-wow-heart 620ms cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--phspb-related-wow-delay, 0ms) + 150ms);
}

.phspb-recommended-streams .phspb-recommended-fast .phspb-related-wow-card.is-phspb-related-wow-visible .phlc-badge-live > span {
  animation: phspb-related-wow-live-dot 2500ms ease-in-out infinite;
  animation-delay: var(--phspb-related-wow-dot-delay, 0ms);
}

@keyframes phspb-related-wow-heart {
  0% { transform: scale(.9); opacity: .68; }
  24% { transform: scale(1.11); opacity: 1; }
  42% { transform: scale(.97); }
  64% { transform: scale(1.055); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes phspb-related-wow-heart-hover {
  0% { transform: scale(1); }
  42% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes phspb-related-wow-live-dot {
  0%, 100% { opacity: .62; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.08); }
}

@media (hover: hover) and (pointer: fine) {
  .phspb-recommended-streams .phspb-recommended-fast .phlc-card:hover,
  .phspb-recommended-streams .phspb-recommended-fast .phlc-card:focus-within {
    transform: translateY(-3px) !important;
    border-color: rgba(214, 165, 255, .46) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 18px 32px rgba(0,0,0,.28), 0 0 0 1px rgba(198, 133, 255, .08), 0 0 23px rgba(144, 72, 255, .13) !important;
  }

  .phspb-recommended-streams .phspb-recommended-fast .phlc-card:hover .phlc-thumb,
  .phspb-recommended-streams .phspb-recommended-fast .phlc-card:focus-within .phlc-thumb {
    transform: scale(1.025) !important;
  }


  .phspb-recommended-streams .phspb-recommended-fast .phlc-card:hover .phlc-name-link,
  .phspb-recommended-streams .phspb-recommended-fast .phlc-card:focus-within .phlc-name-link {
    color: #fff !important;
    text-shadow: 0 0 16px rgba(215, 164, 255, .18);
  }

  .phspb-recommended-streams .phspb-recommended-fast .phlc-card:hover .phlc-home-metric-followers,
  .phspb-recommended-streams .phspb-recommended-fast .phlc-card:focus-within .phlc-home-metric-followers {
    border-color: rgba(224, 177, 255, .36);
    background: rgba(156, 85, 231, .13);
    transform: translateY(-1px);
  }

  .phspb-recommended-streams .phspb-recommended-fast .phlc-card:hover .phlc-home-metric-followers::before,
  .phspb-recommended-streams .phspb-recommended-fast .phlc-card:focus-within .phlc-home-metric-followers::before {
    animation: phspb-related-wow-heart-hover 360ms cubic-bezier(.2,.8,.2,1) both;
  }
}

.phspb-recommended-streams .phspb-recommended-fast .phlc-card:focus-within {
  outline: 2px solid rgba(220, 169, 255, .58);
  outline-offset: 3px;
}

.phspb-recommended-streams .phspb-recommended-fast .phspb-recommended-pagination {
  margin-top: 20px !important;
  padding-top: 15px !important;
  border-top-color: rgba(184, 132, 255, .13) !important;
}

.phspb-recommended-streams .phspb-recommended-fast .phspb-recommended-page {
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
}

.phspb-recommended-streams .phspb-recommended-fast .phspb-recommended-page:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: rgba(218, 170, 255, .58) !important;
  background: rgba(135, 72, 211, .26) !important;
}

.phspb-recommended-streams .phspb-recommended-fast .phspb-recommended-page.is-current {
  box-shadow: 0 7px 18px rgba(119, 42, 218, .28), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

@media (max-width: 767px) {
  .phspb-recommended-streams .phspb-recommended-fast .phlc-recommended-header {
    gap: 10px !important;
    margin-bottom: 13px !important;
  }

  .phspb-recommended-streams .phspb-recommended-fast .phlc-section-title {
    font-size: 18px !important;
    line-height: 1.12 !important;
  }

  .phspb-recommended-streams .phspb-recommended-fast .phlc-section-title::after {
    margin: 5px 0 0 15px;
    font-size: 10px;
  }

  .phspb-recommended-streams .phspb-recommended-fast .phspb-recommended-source-label {
    min-height: 24px !important;
    padding: 5px 8px !important;
    font-size: 9px !important;
  }

  .phspb-recommended-streams .phspb-recommended-fast .phspb-recommended-source-label::before {
    width: 5px;
    height: 5px;
  }

  .phspb-recommended-streams .phspb-recommended-fast .phlc-card:active {
    transform: scale(.985) !important;
    transition-duration: 140ms !important;
  }

  .phspb-recommended-streams .phspb-recommended-fast .phlc-home-metric-followers {
    min-height: 20px;
    padding: 3px 6px !important;
    gap: 3px;
  }

  .phspb-recommended-streams .phspb-recommended-fast .phlc-home-metric-followers::before {
    width: 10px;
    height: 10px;
    font-size: 10px;
  }

  .phspb-recommended-streams .phspb-recommended-fast .phlc-home-metric-followers small {
    margin-left: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phspb-recommended-streams .phspb-recommended-fast .phlc-recommended-header,
  .phspb-recommended-streams .phspb-recommended-fast .phspb-related-wow-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .phspb-recommended-streams .phspb-recommended-fast .phlc-card,
  .phspb-recommended-streams .phspb-recommended-fast .phlc-thumb,
  .phspb-recommended-streams .phspb-recommended-fast .phlc-home-metric-followers,
  .phspb-recommended-streams .phspb-recommended-fast .phspb-recommended-page {
    transition: none !important;
  }

  .phspb-recommended-streams .phspb-recommended-fast .phlc-badge-live > span,
  .phspb-recommended-streams .phspb-recommended-fast .phlc-home-metric-followers::before {
    animation: none !important;
  }
}