/* ==========================================
   Station Actions Bar
   Applies ONLY on radio.php
========================================== */

.station-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px auto 5px;
  justify-content: flex-start;
}

.station-actions .action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #0f1218;
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all .2s ease;
}

.station-actions .action-btn:hover {
  background: #151a24;
  border-color: rgba(255,255,255,.15);
}

.station-actions .action-btn.liked {
  color: #ff6b81;
  border-color: rgba(255,107,129,.4);
}

.station-actions .action-btn span {
  font-weight: 500;
}

/* Mobile */
@media (max-width: 600px) {
  .station-actions {
    justify-content: center;
  }

  .station-actions .action-btn span {
    display: none;
  }

  .station-actions .action-btn {
    padding: 10px;
    font-size: 1rem;
  }
}
.action-btn::before {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .9;
  filter: invert(1) brightness(1.4);
}


/* icons */
.action-like::before {
  background-image: url("/image/icons/heart.svg");
}

.action-share::before {
  background-image: url("/image/icons/share.svg");
}

.action-copy::before {
  background-image: url("/image/icons/copy-link.svg");
}

.action-timer::before {
  background-image: url("/image/icons/timer.svg");
}

.action-btn.copied {
  background: #0f2f1c;
  border-color: #2ecc71;
  color: #2ecc71;
}

.action-btn.copied span::after {
  content: " ✓";
  font-weight: 700;
}
.station-actions .action-timer.is-active {
  background: #ff4757;
  border-color: #ff6b81;
  color: #ffffff;
  font-weight: 700;
}

/* icon pe timer activ */
.station-actions .action-timer.is-active::before {
  filter: invert(1) brightness(2);
}
/* =========================
   Favorit active state
========================= */
.station-actions .action-like.liked {
  background: #2a1420;
  border-color: #ff4d6d;
  color: #ff4d6d;
}

.station-actions .action-like.liked::before {
  opacity: 1;
  filter: none;
}
/* =========================
   Mobile: show timer label
========================= */
@media (max-width: 600px) {
  .station-actions .action-timer span {
    display: inline;
    font-size: 0.7rem;
    margin-left: 1px;
  }

  .station-actions .action-timer {
    padding: 10px 10px;
  }
}
.station-actions .action-timer:active {
  transform: scale(0.96);
}
/* =========================
   Compact timer buttons
========================= */
.station-actions .action-timer {
  gap: 3px; /* era 6–8px, acum mai compact */
}