.blog-card {
  border-radius: 12px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  overflow: hidden;

  background: #fff;

  transition: transform 0.3s;

  position: relative;
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-card-image img {
  width: 100%;

  height: auto;
}

.blog-card-content {
  padding: 15px;
}

.blog-card-meta {
  display: flex;

  gap: 12px;

  align-items: center;

  margin-top: 10px;

  position: relative;
}

.blog-card-meta .meta-item {
  cursor: pointer;

  position: relative;

  font-size: 14px;

  color: #333;
}

.blog-card-meta .likes.liked i {
  color: red;
}

.blog-card-meta .share .share-popup {
  position: absolute;

  bottom: 30px;

  left: 0;

  background: white;

  border: 1px solid #ddd;

  padding: 8px 10px;

  border-radius: 8px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

  display: none;

  flex-direction: column;

  gap: 6px;

  z-index: 100;
}

.blog-card-meta .share .share-popup.show {
  display: flex;
}

.blog-card-meta .share .share-popup a {
  text-decoration: none;

  color: #333;

  font-size: 13px;
}

.blog-card-author {
  margin-top: 10px;

  font-size: 13px;

  color: #555;
}

.meta-item.likes.liked i {
  color: red;
}
/* Default heart style */
.meta-item.likes i.fa-heart {
  color: #ff6b81;
  font-weight: 400;
  font-size: 20px; /* 🔥 bigger heart */
  background: #ffffff; /* white circular bg */
  padding: 6px;
  border-radius: 50%; /* perfect circle */
  transition: 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* When liked (clicked) */
.meta-item.likes.liked i.fa-heart {
  color: #ff0000;
  font-weight: 900;
  font-size: 20px; /* same size in active state */
  background: #ffffff; /* keep white circle */
}

.meta-item.share {
  position: relative;

  display: inline-block;
}

.meta-item.share i {
  cursor: pointer;

  transition: color 0.2s ease;
}

.meta-item.share i:hover {
  color: #08c;
}

.share-popup {
  position: absolute;

  top: 120%;

  left: 50%;

  transform: translateX(-50%);

  background: #fff;

  border: 1px solid #ddd;

  border-radius: 8px;

  padding: 8px 12px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  display: none;

  flex-direction: column;

  z-index: 999;

  min-width: 140px;
}

.share-popup.show {
  display: flex;

  animation: fadeIn 0.2s ease-in;
}

.share-popup a {
  display: flex;

  align-items: center;

  gap: 6px;

  padding: 4px 0;

  text-decoration: none;

  color: #333;

  font-size: 14px;
}

.share-popup a:hover {
  color: #08c;
}

@keyframes fadeIn {
  from {
    opacity: 0;

    transform: translate(-50%, -10px);
  }

  to {
    opacity: 1;

    transform: translate(-50%, 0);
  }
}

.custom-share-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  position: relative;
}

.custom-share-icon {
  width: 34px;

  height: 34px;

  border-radius: 50%; /* makes the icon round */

  object-fit: cover; /* ensures SVG fits perfectly */

  transition: transform 0.3s ease;
}

.custom-share-icon:hover {
  transform: scale(1.1);
}

.share-popup {
  display: none;

  position: absolute;

  top: 45px;

  right: 0;

  background: #fff;

  border: 1px solid #ddd;

  border-radius: 8px;

  padding: 8px 12px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  z-index: 10;
}

.share-popup a {
  display: block;

  color: #333;

  font-size: 14px;

  text-decoration: none;

  padding: 6px 0;
}

.share-popup a:hover {
  color: #08c;
}

.meta-item.comments {
  display: inline-flex;

  align-items: center;

  gap: 6px;
}

.custom-comment-icon {
  width: 20px;

  height: 20px;

  border-radius: 50%; /* makes the icon itself circular */

  object-fit: cover;

  vertical-align: middle;

  transition: transform 0.3s ease;
}

.custom-comment-icon:hover {
  transform: scale(1.1);
}

.comment-count {
  font-size: 14px;

  color: #333;
}

.meta-item.views {
  display: inline-flex;

  align-items: center;

  gap: 6px;
}

.custom-view-icon {
  width: 20px;

  height: 20px;

  border-radius: 50%; /* makes icon round */

  object-fit: cover;

  vertical-align: middle;

  transition: transform 0.3s ease;
}

.custom-view-icon:hover {
  transform: scale(1.1);
}

.view-count {
  font-size: 14px;

  color: #333;
}