/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 23 2026 | 16:32:29 */
/*
===== Самодельный виджет иконок соцсетей =====
## SVG-Иконки:
- https://www.svgrepo.com/

## Цвета соцсетей:
- https://materialui.co/socialcolors/
*/
.tk-socials-group {
/* 	border: 1px dashed red; */
	display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.tk-socials-group a {
	box-sizing: border-box;
/* 	border: 1px dashed green; */
	margin: 0;
	padding: 0;
    display: inline-block;
	/* Убираем лишние отступы */
    line-height: 0;

/*     width: 24px; */
/*     height: 24px; */
    width: 32px;
    height: 32px;
	
    padding: 6px;
    border-radius: 50%;
	/* фон по умолчанию */
/*     background: #f0f0f0; */
	background: var(--wp--preset--color--accent-1);
    transition: all 0.3s ease;
    text-decoration: none;
}
.tk-socials-group a svg {
/* 	border: 1px dashed blue; */
	margin: 0;
	padding: 0;
    display: block;
    width: 100%;
    height: 100%;
	/* Цвет иконки */
/*     fill: #333; */
    fill: var(--wp--preset--color--base);
    transition: fill 0.3s ease;
}

/* Эффект при наведении */
@keyframes u-animation-bounce {
	40% {
	  transform: scale3d(.9,.9,1);
	}
	70% {
	  transform: scale3d(1.05,1.05,1);
	}
	100% {
	  transform: scale3d(1,1,1);
	}
}
.tk-socials-group a:hover {
/*     transform: translateY(-3px) scale(1.05); */
	animation: u-animation-bounce .3s forwards;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Индивидуальные цвета для каждой соцсети *
.u-social-icon-a:hover svg {
    fill: currentColor;
}
/**/

.tk-socials-group a[aria-label="FB"] {
    background: #3e68c0;
}
.tk-socials-group a[aria-label="FB"]:hover {
    box-shadow: 0 4px 15px #3e68c066;
}


.tk-socials-group a[aria-label="TG"] svg {
	transform: translateX(-1px);
}
.tk-socials-group a[aria-label="TG"] {
/*     background: #00aee3; */
	background-image: linear-gradient(
		to bottom,
		#37BBFE 0%,
		#007DBB 100%
	);
}
.tk-socials-group a[aria-label="TG"]:hover {
    box-shadow: 0 4px 15px #00aee366;
}


.tk-socials-group a[aria-label="YT"] {
    background: #ee3130;
}
.tk-socials-group a[aria-label="YT"]:hover {
    box-shadow: 0 4px 15px #ee313066;
}


.tk-socials-group a[aria-label="VK"] svg {
	transform: translateY(1px);
}
.tk-socials-group a[aria-label="VK"] {
    background: #4C75A3;
}
.tk-socials-group a[aria-label="VK"]:hover {
    box-shadow: 0 4px 15px #4C75A366;
}


.tk-socials-group a[aria-label="IG"] svg {
/* 	transform: translateX(-1px) translateY(1px); */
}
.tk-socials-group a[aria-label="IG"] {
/*     background: #E4405F; */
	background-image:
		radial-gradient(circle farthest-corner at 35% 90%,#fec564,transparent 50%),
		radial-gradient(circle farthest-corner at 0 140%,#fec564,transparent 50%),
		radial-gradient(ellipse farthest-corner at 0 -25%,#5258cf,transparent 50%),
		radial-gradient(ellipse farthest-corner at 20% -50%,#5258cf,transparent 50%),
		radial-gradient(ellipse farthest-corner at 100% 0,#893dc2,transparent 50%),
		radial-gradient(ellipse farthest-corner at 60% -20%,#893dc2,transparent 50%),
		radial-gradient(ellipse farthest-corner at 100% 100%,#d9317a,transparent),
		linear-gradient(#6559ca,#bc318f 30%,#e33f5f 50%,#f77638 70%,#fec66d 100%);
}
.tk-socials-group a[aria-label="IG"]:hover {
/*     background: radial-gradient(circle at 30% 30%, #fdf497, #fdf497, #fd5949, #d6249f, #285AEB); */
    box-shadow: 0 4px 15px rgba(214, 41, 118, 0.4);
}


.tk-socials-group a[aria-label="WA"] {
    background: #25D366;
}
.tk-socials-group a[aria-label="WA"]:hover {
    box-shadow: 0 4px 15px #25D36666;
}


.tk-socials-group a[aria-label="Max"] {
/*     background: #4b58e5; */
	background-image:
		radial-gradient(
            ellipse 1213.5px 500px at -212.2px 1166.1px,
            #00f 0%,
            rgba(0, 0, 255, 0) 100%
        ),
        linear-gradient(
            to top right,
            #4cf 0%,
            #53e 66.2%,
            #93d 100%
        );
	;
	
}
.tk-socials-group a[aria-label="Max"]:hover {
    box-shadow: 0 4px 15px #4b58e566;
}


.tk-socials-group a:hover svg {
	/* Иконка становится белой на цветном фоне */
/*     fill: #ffffff; */
}

/* Адаптивность для мобильных *
@media (max-width: 768px) {
    .tk-socials-group {
        gap: 12px;
    }
    .tk-socials-group a {
        width: 36px;
        height: 36px;
        padding: 6px;
    }
}
/* *** */