/* 
   assets/css/social_icons.css
   Add this to style.css OR link separately in navbar.php head
   Proper SVG social icons instead of emojis
*/

.social-links { display:flex; gap:10px; flex-wrap:wrap; }

.social-links a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  text-decoration: none;
}

.social-links a:hover { transform: translateY(-2px); }
.social-links a svg   { width: 18px; height: 18px; fill: #fff; }

/* Instagram hover */
.social-links a.social-instagram:hover { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: transparent; }
/* WhatsApp hover */
.social-links a.social-whatsapp:hover  { background: #25D366; border-color: transparent; }
/* Facebook hover */
.social-links a.social-facebook:hover  { background: #1877F2; border-color: transparent; }
/* YouTube hover */
.social-links a.social-youtube:hover   { background: #FF0000; border-color: transparent; }
/* Twitter hover */
.social-links a.social-twitter:hover   { background: #1DA1F2; border-color: transparent; }