/* ========================================
   FOR YOU (Browse) — carousel packs (.packs-carousel), styles dans packs.css
   ======================================== */

/* Alignement Browse : même inset que packs / playlists */
#forYouSection.for-you-section {
  /* bleed → shared.css */
  margin-bottom: clamp(10px, 1.6vw, 18px);
  transition: opacity 0.3s ease;
}

/* Hauteur pilotée par le carrousel — plus de bloc vide 300px sous les packs */
#forYouSection .fy-carousel-shell {
  position: relative;
  min-height: 180px;
}

/* État "chargement" : espace réservé mais invisible (pas de layout jump) */
#forYouSection.fy-pending {
  opacity: 0;
  pointer-events: none;
}

#forYouSection.for-you-section > .browse-hero {
  padding-left: 0;
  padding-right: 0;
}

/* Bouton Refresh — texte + icône, Satoshi Regular */
.for-you-refresh-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-right: var(--browse-pad-x, clamp(20px, 5vw, 50px));
  margin-bottom: clamp(6px, 1vw, 10px);
  padding: 6px 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: 'Satoshi-Regular', 'Satoshi', sans-serif;
  font-synthesis: none;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.for-you-refresh-btn:hover:not(:disabled) {
  opacity: 0.72;
}

.for-you-refresh-btn:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
}

.for-you-refresh-btn:active:not(:disabled) {
  transform: scale(0.98);
  opacity: 0.85;
}

.for-you-refresh-btn:disabled,
.for-you-refresh-btn.is-loading {
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none;
}

.for-you-refresh-btn .for-you-refresh-icon {
  flex-shrink: 0;
  transform-origin: center;
  transition: transform 0.2s ease;
}

.for-you-refresh-btn.is-loading .for-you-refresh-icon {
  animation: forYouRefreshSpin 0.75s linear infinite;
}

@keyframes forYouRefreshSpin {
  to {
    transform: rotate(360deg);
  }
}