/* Κάνε τα ίδια τα <a> εικονίδια με φόντο, όπου κι αν βρίσκονται */
a[href*="facebook.com"],
a[href*="instagram.com"]{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  background:#111 !important;     /* σκούρο φόντο στο <a> */
  color:#fff !important;           /* “χρώμα κειμένου/εικονιδίου” */
  text-decoration:none;
  border-radius:4px;
  vertical-align:middle;
}

/* Μην αφήνεις ορατό κείμενο δίπλα στα εικονίδια */
a[href*="facebook.com"] > span:not(.sr-only),
a[href*="instagram.com"] > span:not(.sr-only){
  display:none !important;
}

/* Τα εσωτερικά εικονίδια (i/svg) να κληρονομούν το χρώμα και να έχουν μέγεθος */
a[href*="facebook.com"] i, a[href*="facebook.com"] svg,
a[href*="instagram.com"] i, a[href*="instagram.com"] svg{
  width:18px; height:18px;
  font-size:18px !important;
  line-height:1;
  fill:currentColor !important;
  stroke:currentColor !important;
  background:none !important;
}

/* Αν υπάρχει ήδη κείμενο στο <a>, κρύψ’ το οπτικά χωρίς να επηρεάσεις το icon */
a[href*="facebook.com"], a[href*="instagram.com"]{
  font-size:0 !important; line-height:0 !important;
}
a[href*="facebook.com"] i, a[href*="facebook.com"] svg,
a[href*="instagram.com"] i, a[href*="instagram.com"] svg{
  font-size:18px !important; line-height:1;   /* επαναφορά για το icon */
}

/* Βοηθητικό: sr-only (αν δεν υπάρχει ήδη) */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}