/* Icons System - Automatic SVG scaling and replacement */

.icon-svg {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  transition: all 0.2s ease;
  min-width: 16px;
  min-height: 16px;
}

.icon-svg svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: inherit;
}

/* BELKA I STRONA GŁÓWNA - Navigation Icons (White) */
.nav-menu a .icon-svg,
.nav-item .icon-svg {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  fill: white;
  vertical-align: middle;
}

/* Settings Icon */
.settings-icon .icon-svg {
  width: 18px;
  height: 18px;
  fill: white;
}

/* Profile Icon */
.profile-icon .icon-svg {
  width: 18px;
  height: 18px;
  fill: white;
}

/* Search Icon */
.search-icon .icon-svg {
  width: 16px;
  height: 16px;
  fill: white;
}

/* Info Icons - Gray (979595) */
.no-albums .icon-svg,
.no-movies .icon-svg {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  fill: #979595;
}

/* SETTINGS - Button Icons */
button .icon-svg {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
}

/* Settings Section Icons */
.settings .icon-svg {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  fill: #666;
}

/* PROFIL Icons */
.profile .icon-svg {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

/* FAV Icons - 32px (scale: 0.64 from 50px) */
.item-action-btn .icon-svg {
  width: 32px;
  height: 20.48px; /* 32/50 * 32 = 20.48px */
  transform: scale(0.64);
}

/* EDIT Icons - 20px (scale: 0.4 from 50px) */
.edit-btn .icon-svg {
  width: 20px;
  height: 12.8px; /* 20/50 * 32 = 12.8px */
  transform: scale(0.4);
}

/* LIST/VIEW Icons - 14px (scale: 0.28 from 50px) */
.view-btn .icon-svg {
  width: 14px;
  height: 8.96px; /* 14/50 * 32 = 8.96px */
  transform: scale(0.28);
}

/* Placeholder Icons - 24px (scale: 0.48 from 50px) */
.list-poster .icon-svg {
  width: 24px;
  height: 15.36px; /* 24/50 * 32 = 15.36px */
  transform: scale(0.48);
}

/* Hover effects */
.icon-svg:hover {
  opacity: 0.8;
  transform: scale(1.05);
}