/* ==========================================================================
   KompasPress - Icon Pack & SVG Sprites
   ========================================================================== */

.icon-svg {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Social Media Icons */
.iconSos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: all 0.3s ease;
  background-color: #f1f3f6;
  color: #333333;
}
.iconSos:hover {
  transform: translateY(-2px);
}

.iconSos-facebook { color: #1877f2; background: #e7f0fd; }
.iconSos-facebook:hover { background: #1877f2; color: #fff; }

.iconSos-x { color: #000000; background: #f0f0f0; }
.iconSos-x:hover { background: #000000; color: #fff; }

.iconSos-telegram { color: #229ed9; background: #e5f6fd; }
.iconSos-telegram:hover { background: #229ed9; color: #fff; }

.iconSos-instagram { color: #e1306c; background: #fde8f0; }
.iconSos-instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }

.iconSos-youtube { color: #ff0000; background: #ffeaea; }
.iconSos-youtube:hover { background: #ff0000; color: #fff; }

.iconSos-tiktok { color: #000000; background: #f0f0f0; }
.iconSos-tiktok:hover { background: #010101; color: #00f2fe; }

.iconSos-threads { color: #000000; background: #f0f0f0; }
.iconSos-threads:hover { background: #000; color: #fff; }

.iconSos-whatsapp { color: #25d366; background: #eafaf1; }
.iconSos-whatsapp:hover { background: #25d366; color: #fff; }

/* In-line Article Action Icons */
.reactionItem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f5f7f9;
  border: 1px solid #e1e4e8;
  border-radius: 20px;
  color: #555555;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.reactionItem:hover {
  background: #e9eef3;
  color: #004b90;
  border-color: #004b90;
}
.reactionItem.-active {
  background: #004b90;
  color: #ffffff;
  border-color: #004b90;
}

/* Avatar Initials */
.avatarInit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #004b90 0%, #0072ce 100%);
  color: #ffffff;
  font-weight: 700;
  border-radius: 50%;
  text-transform: uppercase;
  user-select: none;
}