/* =========================================================================
 * radio/radio-style.css — إضافة راديو الدردشة (تنسيق الواجهة)
 * -------------------------------------------------------------------------
 * إضافة مستقلة، تعتمد على متغيرات وتصميم الشريط العلوي usx-quickbar
 * الموجود بالفعل (usx-qb-item / usx-qb-ico / usx-qb-dropdown ...) حتى
 * يظهر زرار الراديو متناسق تماماً مع باقي التصميم.
 * ========================================================================= */

/* نقطة البث الخضراء اللي بتظهر فوق ايقونة السماعة لما يكون فيه قناة شغالة */
.usx-radio-live-dot {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #23c16b;
  border: 2px solid #fff;
  display: none;
  box-shadow: 0 0 0 0 rgba(35, 193, 107, .55);
  animation: usxRadioPulse 1.6s ease-out infinite;
}
.usx-radio-live-dot.usx-radio-live-on { display: block; }

@keyframes usxRadioPulse {
  0%   { box-shadow: 0 0 0 0 rgba(35,193,107,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(35,193,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(35,193,107,0); }
}

.usx-radio-btn.usx-radio-playing {
  color: #23c16b;
}

.usx-radio-dropdown { display: flex; flex-direction: column; }

.usx-radio-dropdown .usx-qb-dd-body { padding: 8px; }

.usx-radio-channel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid #f0f0f6;
  background: #fff;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.usx-radio-channel:active { transform: scale(.98); }
.usx-radio-channel:last-child { margin-bottom: 0; }
.usx-radio-channel.usx-radio-active {
  background: linear-gradient(135deg, rgba(35,193,107,.09), rgba(35,193,107,.03));
  border-color: rgba(35,193,107,.4);
}

.usx-radio-channel-ico {
  width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--theme-btcolor), var(--theme-hicolor));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; box-shadow: 0 2px 6px rgba(20,30,50,.18);
}
.usx-radio-channel.usx-radio-active .usx-radio-channel-ico { background: #23c16b; }

.usx-radio-channel-name {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; color: #2c2c3a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.usx-radio-channel-eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; width: 16px; }
.usx-radio-channel-eq span {
  width: 3px; background: #23c16b; border-radius: 2px; display: none;
  animation: usxRadioEq .9s ease-in-out infinite;
}
.usx-radio-channel.usx-radio-active.usx-radio-is-playing .usx-radio-channel-eq span { display: block; }
.usx-radio-channel-eq span:nth-child(1){ height:6px; animation-delay:0s; }
.usx-radio-channel-eq span:nth-child(2){ height:12px; animation-delay:.2s; }
.usx-radio-channel-eq span:nth-child(3){ height:8px; animation-delay:.4s; }
@keyframes usxRadioEq {
  0%,100% { transform: scaleY(.5); }
  50% { transform: scaleY(1.2); }
}

.usx-radio-player {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #f0f0f6;
  background: #fafafd;
}
.usx-radio-playbtn {
  width: 36px; height: 36px; min-width: 36px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, var(--theme-btcolor), var(--theme-hicolor));
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; box-shadow: 0 2px 6px rgba(20,30,50,.18);
}
.usx-radio-playbtn:active { transform: scale(.93); }

.usx-radio-nowplay { flex: 1; min-width: 0; }
.usx-radio-nowplay-name {
  font-size: 12px; font-weight: 800; color: #2c2c3a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.usx-radio-nowplay-state { font-size: 10.5px; color: #9a9aa8; margin-top: 1px; }
.usx-radio-nowplay-state.usx-radio-state-live { color: #23c16b; font-weight: 700; }
.usx-radio-nowplay-state.usx-radio-state-error { color: #ff4757; font-weight: 700; }

.usx-radio-volume {
  width: 64px;
  accent-color: var(--theme-btcolor);
  cursor: pointer;
}

@media (max-width: 480px) {
  .usx-radio-volume { width: 46px; }
}