/* ===========================================================================
   SHARE — Social media share buttons
   Petz.gr

   !important is heavily used here because Modesy defines .product-share
   button styles (L3509-3536) and we override size, colors, layout.
   Merged duplicate social-platform color definitions into single blocks.
   =========================================================================== */

/* ── Social platform colors ──────────────────────────────── */
/* These apply to ALL share button contexts (sidebar, detail, fp-share) */

button[aria-label="share-facebook"],
a[title="share-facebook"],
.product-share button[aria-label="share-facebook"] {
	background: linear-gradient(135deg, #1877F2 0%, #0C63D4 100%) !important;
	color: #fff !important;
}
button[aria-label="share-facebook"]:hover,
a[title="share-facebook"]:hover,
.product-share button[aria-label="share-facebook"]:hover {
	background: linear-gradient(135deg, #0C63D4 0%, #084DA1 100%) !important;
}

button[aria-label="share-twitter"],
a[title="share-twitter"],
.product-share button[aria-label="share-twitter"] {
	background: linear-gradient(135deg, #000000 0%, #14171A 100%) !important;
	color: #fff !important;
}
button[aria-label="share-twitter"]:hover,
a[title="share-twitter"]:hover,
.product-share button[aria-label="share-twitter"]:hover {
	background: linear-gradient(135deg, #14171A 0%, #2A2E33 100%) !important;
}

a[title="share-whatsapp"],
.product-share button[aria-label="share-whatsapp"] {
	background: linear-gradient(135deg, #25D366 0%, #1EBE57 100%) !important;
	color: #fff !important;
}
a[title="share-whatsapp"]:hover,
.product-share button[aria-label="share-whatsapp"]:hover {
	background: linear-gradient(135deg, #1EBE57 0%, #189F48 100%) !important;
}

button[aria-label="share-pinterest"],
a[title="share-pinterest"] {
	background: linear-gradient(135deg, #E60023 0%, #c00020 100%) !important;
	color: #fff !important;
}
button[aria-label="share-pinterest"]:hover,
a[title="share-pinterest"]:hover {
	background: linear-gradient(135deg, #c00020 0%, #990019 100%) !important;
}

button[aria-label="share-linkedin"],
a[title="share-linkedin"] {
	background: linear-gradient(135deg, #0A66C2 0%, #085397 100%) !important;
	color: #fff !important;
}
button[aria-label="share-linkedin"]:hover,
a[title="share-linkedin"]:hover {
	background: linear-gradient(135deg, #085397 0%, #064278 100%) !important;
}

button[aria-label="share-telegram"],
a[title="share-telegram"] {
	background: linear-gradient(135deg, #0088cc 0%, #006699 100%) !important;
	color: #fff !important;
}
button[aria-label="share-telegram"]:hover,
a[title="share-telegram"]:hover {
	background: linear-gradient(135deg, #006699 0%, #004d73 100%) !important;
}

.product-share button[aria-label="share-viber"] {
	background: linear-gradient(135deg, #7360F2 0%, #5B47D5 100%) !important;
	color: #fff !important;
}
.product-share button[aria-label="share-viber"]:hover {
	background: linear-gradient(135deg, #5B47D5 0%, #4A39B3 100%) !important;
}

.product-share button[aria-label="share-email"] {
	background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%) !important;
	color: #fff !important;
}
.product-share button[aria-label="share-email"]:hover {
	background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%) !important;
}

/* SVG icons inside share buttons — white fill */
.product-share button svg,
.share-buttons svg,
.social-share svg {
	fill: #ffffff !important;
	color: #ffffff !important;
}

/* ── Share layout — !important needed (overrides Modesy .product-share L3509) ── */

.share-buttons,
.social-share,
.fp-share-icons {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 8px !important;
	flex-wrap: nowrap !important;
}

.share-buttons ul,
.social-share ul,
.product-share ul {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 8px !important;
	flex-wrap: nowrap !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.share-buttons li,
.social-share li,
.product-share li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.share-buttons li:last-child,
.social-share li:last-child,
.product-share li:last-child {
	margin-right: 0 !important;
}

/* ── Share button shape — !important needed (overrides Modesy L3529) ── */

.share-buttons a,
.share-link,
.social-share a,
.product-share button.button-link {
	width: 50px !important;
	height: 50px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	border: none !important;
	cursor: pointer !important;
	position: relative !important;
	overflow: hidden !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.share-buttons a:hover,
.share-link:hover,
.social-share a:hover,
.product-share button.button-link:hover {
	transform: translateY(-3px) scale(1.05) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}

.share-buttons svg,
.share-link svg,
.social-share svg,
.product-share svg {
	width: 24px !important;
	height: 24px !important;
	position: relative !important;
	z-index: 1 !important;
	transition: transform 0.3s ease !important;
}

.share-buttons a:hover svg,
.share-link:hover svg,
.social-share a:hover svg,
.product-share button.button-link:hover svg {
	transform: scale(1.1) !important;
}

/* ── Detail page share (fp-share-icons) ──────────────────── */

.fp-share-icons {
	width: 100%;
}

.fp-share-icons .product-share,
.fp-share-icons .row-custom {
	width: 100%;
	display: flex;
	justify-content: center;
}

.fp-share-icons .product-share ul {
	display: flex !important;
	justify-content: space-between !important;
	width: 100%;
}

.fp-share-icons .product-share ul li {
	margin: 0;
	flex: none;
}

.fp-share-icons .product-share ul li button {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	cursor: pointer;
	transition: transform 0.2s, opacity 0.2s;
	color: #fff;
	font-size: 1.2rem;
}

.fp-share-icons .product-share ul li button:hover {
	transform: scale(1.1);
	opacity: 0.9;
}

.fp-share-icons .product-share ul li button i {
	color: #fff !important;
	font-size: 22px;
}