.share-component::-webkit-scrollbar-thumb {
    background-color: #4a4a4a; /* dark-gray */
    border-radius: 10px;
}
/* Ensure smooth transitions on the icon container (wrapper) */
.share-component .icon-wrapper {
    transition: color 0.3s ease-in-out; /* Only transition color here */
}
/* Smooth transition for the table cell background */
.share-component .share-btn-cell {
     transition: background-color 0.3s ease-in-out;
}
/* Style for SVG paths */
.share-component .svg-path {
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none; /* Default to no fill */
    stroke: currentColor; /* Inherit color */
}
/* Override fill for specific social icons that need it */
.share-component .icon-wrapper svg[data-social="facebook"] path,
.share-component .icon-wrapper svg[data-social="twitter"] path,
.share-component .icon-wrapper svg[data-social="linkedin"] path,
.share-component .icon-wrapper svg[data-social="whatsapp"] path,
.share-component .icon-wrapper svg[data-social="telegram"] path {
    fill: currentColor; /* Use fill for these icons */
    stroke: none; /* No stroke for filled icons */
}
/* Style for the copy icon specifically */
 .share-component #copyBtn svg path {
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke: currentColor;
 }
 /* Style for the heading share icon specifically */
 .share-component .heading-share-icon path {
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke: currentColor;
 }

 .share-component td:hover {
    background-color: #000000; /* Light Green */
    animation: rotate-icon-like 0.7s ease-in-out both;
 }