/* Bordo YT Highlights — isolated from theme/Elementor */
.byh-highlights,
.byh-highlights * {
  box-sizing: border-box !important;
}

.byh-highlights {
  --byh-bordo: #4a0e23;
  --byh-bordo-2: #7a1f3d;
  --byh-gold: #c9a27a;
  width: 100% !important;
  max-width: 980px !important;
  margin: 10px auto 28px !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.byh-highlights__track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 18px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 6px 4px 8px !important;
  margin: 0 !important;
  list-style: none !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.byh-highlights__track::-webkit-scrollbar { display: none !important; }

.byh-highlight {
  all: unset;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  width: 92px !important;
  max-width: 92px !important;
  cursor: pointer !important;
  text-align: center !important;
  color: var(--byh-bordo) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: normal !important;
  font: inherit !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: transform .2s ease !important;
}
.byh-highlight:hover,
.byh-highlight:focus {
  transform: translateY(-2px) !important;
  outline: none !important;
  background: transparent !important;
  color: var(--byh-bordo) !important;
}

.byh-highlight__ring {
  display: block !important;
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  min-height: 78px !important;
  max-width: 78px !important;
  max-height: 78px !important;
  margin: 0 0 8px !important;
  padding: 3px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, var(--byh-bordo-2), var(--byh-bordo) 50%, var(--byh-gold)) !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(74,14,35,.12) !important;
  overflow: visible !important;
}

.byh-highlight__avatar {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #111 !important;
  border: 2px solid #fff !important;
  position: relative !important;
}

.byh-highlight__avatar img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  transform: none !important;
}

.byh-highlight__fallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--byh-bordo) !important;
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 700 !important;
}

.byh-highlight__label {
  display: block !important;
  width: 92px !important;
  max-width: 92px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--byh-bordo) !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ===== Viewer ===== */
.byh-viewer[hidden] { display: none !important; }
.byh-viewer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
}
.byh-viewer__backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.94) !important;
}
.byh-viewer__shell {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: min(520px, 100%) !important;
  max-height: calc(100dvh - 36px) !important;
}
.byh-viewer__dialog {
  position: relative !important;
  flex: 1 !important;
  width: min(400px, 100%) !important;
  height: min(780px, calc(100dvh - 36px)) !important;
  margin: 0 auto !important;
  background: #000 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.5) !important;
  display: flex !important;
  flex-direction: column !important;
}
.byh-viewer__top {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  z-index: 6 !important;
  padding: 12px 12px 36px !important;
  background: linear-gradient(180deg, rgba(0,0,0,.75), transparent) !important;
  pointer-events: none !important;
}
.byh-viewer__top * { pointer-events: auto !important; }
.byh-viewer__progress {
  display: flex !important;
  gap: 4px !important;
  margin: 0 0 10px !important;
}
.byh-viewer__progress span {
  flex: 1 !important;
  height: 2px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.28) !important;
  overflow: hidden !important;
}
.byh-viewer__progress span i {
  display: block !important;
  height: 100% !important;
  width: 0 !important;
  background: #fff !important;
}
.byh-viewer__progress span.is-done i,
.byh-viewer__progress span.is-active i { width: 100% !important; }
.byh-viewer__meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #fff !important;
}
.byh-viewer__titles { flex: 1 !important; min-width: 0 !important; }
.byh-viewer__playlist {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #fff !important;
}
.byh-viewer__video-title {
  display: block !important;
  font-size: 11px !important;
  opacity: .8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #fff !important;
}
.byh-viewer__counter {
  font-size: 11px !important;
  opacity: .75 !important;
  color: #fff !important;
}
.byh-viewer__close {
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  cursor: pointer !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}
.byh-viewer__stage {
  position: relative !important;
  flex: 1 !important;
  min-height: 0 !important;
  background: #000 !important;
}
.byh-viewer__player {
  position: absolute !important;
  inset: 0 !important;
  background: #000 !important;
}
.byh-viewer__player iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}
.byh-viewer__skeleton {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(255,255,255,.75) !important;
  font-size: 13px !important;
  background: #111 !important;
}
.byh-viewer__bottom {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  z-index: 6 !important;
  padding: 40px 14px 16px !important;
  background: linear-gradient(0deg, rgba(0,0,0,.85), transparent) !important;
  display: flex !important;
  justify-content: center !important;
  pointer-events: none !important;
}
.byh-viewer__yt {
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: #4a0e23 !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: 0 !important;
}
.byh-viewer__yt:hover { background: #6b1a35 !important; color: #fff !important; text-decoration: none !important; }
.byh-viewer__status {
  position: absolute !important;
  left: 16px; right: 16px; bottom: 70px;
  z-index: 7 !important;
  margin: 0 !important;
  text-align: center !important;
  color: #fff !important;
  font-size: 13px !important;
}
.byh-nav {
  flex: 0 0 auto !important;
  width: 46px !important;
  height: 46px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  font-size: 28px !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.byh-nav:disabled { opacity: .3 !important; cursor: default !important; }
.byh-nav:hover:not(:disabled) { background: rgba(255,255,255,.24) !important; }

@media (max-width: 720px) {
  .byh-viewer { padding: 0 !important; }
  .byh-viewer__shell { width: 100% !important; max-height: none !important; height: 100% !important; gap: 0 !important; }
  .byh-viewer__dialog { width: 100% !important; height: 100% !important; border-radius: 0 !important; }
  .byh-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 8 !important;
    width: 40px !important;
    height: 40px !important;
  }
  .byh-nav--prev { left: 8px !important; }
  .byh-nav--next { right: 8px !important; }
  .byh-highlights__track { justify-content: flex-start !important; }
}