/* ===== BOTÃO "DISPONÍVEL OFFLINE" ===== */

.offline-dl {
  border: none;
  background: none;
  cursor: pointer;
}

.offline-dl:disabled {
  cursor: progress;
  opacity: 0.85;
}

/* Variante pill: usada fora do menu da playlist (cabeçalho, cards). */
.offline-dl-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  border-radius: 2rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s;
}

.offline-dl-pill:hover:not(:disabled) {
  border-color: #43e97b;
  color: #27ae60;
  transform: translateY(-1px);
}

.offline-dl-pill[data-dl-state="saved"] {
  border-color: rgba(67, 233, 123, 0.55);
  background: rgba(67, 233, 123, 0.12);
  color: #27ae60;
}

.offline-dl-pill[data-dl-state="confirm"] {
  border-color: rgba(245, 87, 108, 0.55);
  background: rgba(245, 87, 108, 0.12);
  color: #f5576c;
}

.offline-dl-pill[data-dl-state="error"] {
  border-color: rgba(245, 87, 108, 0.55);
  color: #f5576c;
}

/* Variante menu: item do grid de opções da playlist. O ícone colorido troca
   de cor conforme o estado para o usuário achar o botão de relance. */
.offline-dl-menu[data-dl-state="saved"] .plmenu-icon {
  background: linear-gradient(135deg, #43e97b, #38f9d7) !important;
}

.offline-dl-menu[data-dl-state="confirm"] .plmenu-icon,
.offline-dl-menu[data-dl-state="error"] .plmenu-icon {
  background: linear-gradient(135deg, #f5576c, #ff6f91) !important;
}

/* ===== LISTA DE CONTEÚDO BAIXADO (página /offline e ajustes) ===== */

.offline-saved-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.offline-saved-item:last-child {
  border-bottom: none;
}

.offline-saved-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}

.offline-saved-info {
  flex: 1 1 auto;
  min-width: 0;
}

.offline-saved-title {
  display: block;
  font-weight: 600;
  color: var(--bs-body-color);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offline-saved-title:hover {
  color: #667eea;
}

.offline-saved-meta {
  display: block;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.offline-saved-remove {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: var(--bs-secondary-color);
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 0.5rem;
}

.offline-saved-remove:hover {
  color: #f5576c;
  background: rgba(245, 87, 108, 0.1);
}