/* ==========================================
   ▶ YOUTUBE CHANNEL WIDGET — Frutiger Aero glass. Stacks above the
   Active Desktop hit-counter widget, on the same right-hand column.
   ========================================== */
.yt-widget {
  position: fixed;
  bottom: 175px; /* clears the hit-counter widget (bottom:90px + its own height) */
  right: 20px;
  z-index: 20;
  width: 172px;
  background: linear-gradient(180deg, #eef8ff 0%, #d7ecfb 100%);
  border-radius: 6px;
  border: 1px solid #7fa8c9;
  box-shadow: 0 6px 16px rgba(17, 58, 92, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
  font-family: "Segoe UI", Tahoma, Verdana, sans-serif;
}

.yt-widget-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #eaf6ff 0%, #bfe4fb 45%, #7fc3ef 46%, #3f9ee0 100%);
  color: #113a5c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 700;
  cursor: move;
}
.yt-widget-close {
  flex: none;
  margin-left: auto;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(17, 58, 92, 0.4);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.5);
  color: #113a5c;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}
.yt-widget-close:hover { background: #ff5f57; color: #fff; border-color: #b5433d; }
.yt-widget-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #ff3b30;
  color: #fff;
  font-size: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.yt-widget-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}
.yt-widget-caption {
  font-size: 11px;
  color: #3a6a8a;
}

.yt-widget-btn {
  display: block;
  text-align: center;
  padding: 6px 0;
  border-radius: 5px;
  border: 1px solid #2f7cb8;
  background: linear-gradient(180deg, #fbfeff 0%, #cdeaff 45%, #8fceef 46%, #57aee0 100%);
  color: #0e3a4a;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(17, 58, 92, 0.3);
}
.yt-widget-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #dcf2ff 45%, #a6dcf7 46%, #6cbceb 100%);
}
.yt-widget-btn:active {
  background: linear-gradient(180deg, #8fceef 0%, #57aee0 100%);
}

@media (max-width: 760px) {
  .yt-widget { right: 12px; bottom: 175px; width: 150px; }
}