/* ============================================================================
   Blog Info Icons - Scoped styles for blog post action icons
   ----------------------------------------------------------------------------
   ใช้สำหรับไอคอนใน blog-info-wrap เท่านั้น โดยต้องกำหนดสีต่อไอคอนด้วย CSS variable:
   - style="--blog-icon-color: #1877F2;"
   ============================================================================ */

/* Default: brand background + white icon */
/* ใช้ CSS variable จาก inline style */
.blog-info-wrap .blog-info {
  /* พื้นหลังสีแบรนด์ */
  background-color: var(--blog-icon-color, #111827) !important;
  /* ขอบสีแบรนด์ */
  border: 1px solid var(--blog-icon-color, #111827) !important;
  /* Icon และ text สีขาว */
  color: #ffffff !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  /* ไม่ให้ปุ่มหรือ icon ขยับ */
  transform: none !important;
}

/* Force icon to follow parent color - ไม่ให้ icon ขยับหรือมี effect */
.blog-info-wrap .blog-info i,
.blog-info-wrap .blog-info .fa,
.blog-info-wrap .blog-info .fas,
.blog-info-wrap .blog-info .far,
.blog-info-wrap .blog-info .fab,
.blog-info-wrap .blog-info .fal {
  color: inherit !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Hover: ไม่มี effect - พื้นหลังและ icon คงเดิม */
.blog-info-wrap .blog-info:hover,
.blog-info-wrap .blog-info:focus,
.blog-info-wrap .blog-info:focus-visible {
  /* พื้นหลังคงเดิม - ไม่เปลี่ยน */
  background-color: var(--blog-icon-color, #111827) !important;
  /* ขอบคงเดิม */
  border-color: var(--blog-icon-color, #111827) !important;
  /* Icon สีขาว (เหมือนเดิม) - ไม่มี effect */
  color: #ffffff !important;
  text-decoration: none;
  outline: none;
  /* ไม่ให้ขยับเมื่อ hover */
  transform: none !important;
}

/* Icon hover - ไม่ให้ icon ขยับ */
.blog-info-wrap .blog-info:hover i,
.blog-info-wrap .blog-info:hover .fa,
.blog-info-wrap .blog-info:hover .fas,
.blog-info-wrap .blog-info:hover .far,
.blog-info-wrap .blog-info:hover .fab,
.blog-info-wrap .blog-info:hover .fal,
.blog-info-wrap .blog-info:focus i,
.blog-info-wrap .blog-info:focus .fa,
.blog-info-wrap .blog-info:focus .fas,
.blog-info-wrap .blog-info:focus-visible i,
.blog-info-wrap .blog-info:focus-visible .fa {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Specific colors for each icon type (fallback ถ้าไม่มี inline style) */
/* Print - สีเทาเข้ม */
.blog-info-wrap .blog-info.print_btn {
  --blog-icon-color: #6B7280;
}

/* Email - สีแดง */
.blog-info-wrap .blog-info[href^="mailto:"] {
  --blog-icon-color: #DC2626;
}

/* Like - สีฟ้า (Facebook like) */
.blog-info-wrap .blog-info[title*="ไลค์"],
.blog-info-wrap .blog-info button[title*="ไลค์"] {
  --blog-icon-color: #1877F2;
}

/* Views - สีเขียว */
.blog-info-wrap .blog-info[title*="ผู้เข้าชม"] {
  --blog-icon-color: #10B981;
}

/* Share - สีม่วง */
.blog-info-wrap .blog-info[title*="แชร์"] {
  --blog-icon-color: #8B5CF6;
}

/* Bookmark - สีส้ม */
.blog-info-wrap .blog-info[title*="บุ๊กมาร์ก"],
.blog-info-wrap .blog-info button[title*="บุ๊กมาร์ก"] {
  --blog-icon-color: #F59E0B;
}