.fixed-widget-list {
 	position: fixed;
 	left: 3rem;
 	bottom: 0rem;
 	margin: 0;
 	padding: 0;
 	list-style: none;
 	z-index: 999;
 	pointer-events: none;
 }

 .fixed-widget-list li {
 	width: 4rem;
 	height: 4rem;
 	border-radius: 50%;
 	white-space: nowrap;
 	background-color: #2c5cda;
 	margin-bottom: 1.4286rem;
 	position: relative;
 	opacity: 0;
 	visibility: hidden;
 	cursor: pointer;
 	transition: all 300ms cubic-bezier(0.65, 0.05, 0.36, 1);
 	pointer-events: initial;
 }

 .fixed-widget-list li span {
 	left: 4.7143rem;
 	top: 50%;
 	height: 3rem;
 	line-height: 3rem;
 	position: absolute;
 	border-radius: 1.5rem;
 	background-color: inherit;
 	margin-top: -1.5rem;
 	color: #fff;
 	padding: 0rem 2.1429rem;
 	font-size: 1.1429rem;
 	opacity: 0;
 	visibility: hidden;
 	transition: all 300ms cubic-bezier(0.65, 0.05, 0.36, 1);
 }

 .fixed-widget-list li a {
 	display: block;
 	width: 0;
 	height: 0;
 	background-color: inherit;
 	background-clip: padding-box;
 	border-radius: 100%;
 	border: 2rem solid transparent;
 }



 .fixed-widget-list li:hover span {
 	opacity: 1;
 	visibility: visible;
 	left: 5.4286rem;
 }

 .fixed-widget-list li:hover {
 	box-shadow: 0 0 0.7143rem rgba(0, 0, 0, 0.2);
 }

 .fixed-widget-list li.active {
 	opacity: 1;
 	visibility: visible;
 }

 .fixed-widget-list li {
 	background-image: url("../images/fixed-widget-icon.png");
 	background-repeat: no-repeat;
 	background-position: 0 7.1429rem;
 }

 .fixed-widget-list li.twitter {
 	background-color: #00abee;
 	background-position: 0 0;
 }

 .fixed-widget-list li.youtube {
 	background-color: #cd1616;
 	background-position: 0 -4rem;
 }

 .fixed-widget-list li.instagram {
 	background-color: #8d20c6;
 	background-position: 0 -8rem;
 }

 .fixed-widget-list li.vimeo {
 	background-color: #00a7e7;
 	background-position: 0 -12rem;
 }

 .fixed-widget-list li.pinterest {
 	background-color: #c8232c;
 	background-position: 0 -16rem;
 }

 .fixed-widget-list li.linkedin {
 	background-color: #1b88bc;
 	background-position: 0 -20rem;
 }

 .fixed-widget-list li.rss {
 	background-color: #ee942a;
 	background-position: 0 -24rem;
 }

 .fixed-widget-list li.facebook {
 	background-color: #3b5998;
 	background-position: 0 -28rem;
 }

 .fixed-widget-list li.phone {
 	background-color: #20a3fd;
 	background-position: 0 -32rem;
 }

 .fixed-widget-list li.envelope {
 	background-color: #1ec3c9;
 	background-position: 0 -36rem;
 }

 .fixed-widget-list li.behance {
 	background-color: #1879fd;
 	background-position: 0 -48rem;
 }

 .fixed-widget-list li.dribbble {
 	background-color: #ea4c89;
 	background-position: 0 -52rem;
 }

 .fixed-widget-list li.WhatsApp {
 	background-color: #1ebea5;
 	background-position: 0 -56rem;
 }

 .fixed-widget-list li.Flickr {
 	background-color: #0060d9;
 	background-position: 0 -59.4286rem;
 }

 .fixed-widget-list li.share {
 	background-color: #ff6e2f;
 	opacity: 1;
 	visibility: visible;
 	background-position: 0 -40rem;
 	transition: all 300ms cubic-bezier(0.65, 0.05, 0.36, 1);
 }



 .fixed-widget-list li.share.active {
 	background-position: 0 -44rem;
 }


 .fixed-widget-list li.backtop {
 	opacity: 1;
 	visibility: visible;
 	margin-bottom: -4rem;
 	transition: all 300ms cubic-bezier(0.65, 0.05, 0.36, 1);
 }

 .fixed-widget-list li.backtop::after {
 	content: "";
 	width: 1.0714rem;
 	height: 1.0714rem;
 	border-top: 0.0714rem solid #FFF;
 	border-right: 0.0714rem solid #FFF;
 	position: absolute;
 	right: 50%;
 	top: 50%;
 	-webkit-transform: rotate(-45deg);
 	transform: rotate(-45deg);
 	margin: -0.4286rem 0rem 0 0;
 	transition: all 300ms cubic-bezier(0.65, 0.05, 0.36, 1);
 	margin-right: 0;
 	transform-origin: 0.2857rem -0.2143rem;
 	backface-visibility: hidden;
 }

 .fixed-widget-list li.backtop::before {
 	content: "";
 	height: 0rem;
 	border-right: 0.0714rem solid #FFF;
 	position: absolute;
 	right: 50%;
 	top: 50%;
 	margin: -0.3571rem 0.0714rem 0rem 0rem;
 	transition: all 300ms cubic-bezier(0.65, 0.05, 0.36, 1);
 	transform: translateX(0.0286rem);
 	backface-visibility: hidden;

 }

 .fixed-widget-list li.backtop:hover::before {
 	margin: -0.7857rem 0.0714rem 0rem 0rem;
 	height: 1.7143rem;
 }

 .fixed-widget-list li.backtop:hover::after {
 	margin-top: -0.8571rem;
 }

 .fixed-widget-list li.backtop.active {
 	margin-bottom: 2.1429rem;
 }


 @media only screen and (max-width: 767px) {
 	.fixed-widget-list {
 		left: 0.5rem;
 		-webkit-transform: scale(0.714285714);
 		transform: scale(0.714285714);
 		-webkit-transform-origin: center bottom;
 		transform-origin: center bottom;
 	}


 	.fixed-widget-list li span,
 	.fixed-widget-list li:hover span {
 		display: none;
 	}

 }

/******************* Arjang (Figma "Short Key"): the "share" item is the gold "+" button; the items
   before it (search = rss, message = WhatsApp, recent visits = Flickr) fan out around it in a quarter arc.
   Open/close stays the plugin's own logic (custom.js adds .active to share and the items before it). *****************/
.fixed-widget-list {
	left: 13px;
	bottom: 44px;
	width: 52px;
	height: 52px;
}
.fixed-widget-list li {
	position: absolute;
	left: 2px;
	bottom: 2px;
	width: 48px;
	height: 48px;
	margin: 0;
	background-color: rgba(196, 158, 49, 0.2);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transform: translate(0, 0) scale(0.4);
}
.fixed-widget-list li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent no-repeat center / 24px 24px;
}
.fixed-widget-list li span { display: none; }
/* item icons (Figma assets, rotated 90deg like the design) */
.fixed-widget-list li.rss a { background-image: url('../images/widget/search.svg'); transform: rotate(90deg); }
.fixed-widget-list li.WhatsApp a { background-image: url('../images/widget/message.svg'); background-size: 23px 23px; transform: rotate(90deg) scaleX(-1); }
.fixed-widget-list li.Flickr { background-color: transparent; }
.fixed-widget-list li.Flickr a { background-image: url('../images/widget/history.svg'); background-size: 48px 48px; transform: rotate(90deg); }
.fixed-widget-list li.rss::before, .fixed-widget-list li.rss::after,
.fixed-widget-list li.WhatsApp::before, .fixed-widget-list li.WhatsApp::after,
.fixed-widget-list li.Flickr::before, .fixed-widget-list li.Flickr::after { content: none; }
/* open: quarter arc to the right of the button (offsets from the Figma component) */
.fixed-widget-list li.rss.active { transform: translate(5px, -55px) scale(1); }
.fixed-widget-list li.WhatsApp.active { transform: translate(49px, -26px) scale(1); }
.fixed-widget-list li.Flickr.active { transform: translate(49px, 26px) scale(1); }
/* the "+" button: 52px gold glass circle, rotates to "x" while open */
.fixed-widget-list li.share {
	left: 0;
	bottom: 0;
	width: 52px;
	height: 52px;
	opacity: 1;
	visibility: visible;
	transform: none;
	background: rgba(196, 158, 49, 0.2) url('../images/widget/add.svg') no-repeat center / 24px 24px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14);
	border: 1px solid rgba(255, 235, 201, 0.35);
	transition: transform 300ms cubic-bezier(0.65, 0.05, 0.36, 1);
}
.fixed-widget-list li.share::before, .fixed-widget-list li.share::after { content: none; }
.fixed-widget-list li.share.active { transform: rotate(45deg); background-color: rgba(196, 158, 49, 0.35); }
/* Arjang: drop the plugin's coloured sprite circles for the three shortcut items */
.fixed-widget-list li.rss,
.fixed-widget-list li.WhatsApp { background-image: none; background-color: rgba(196, 158, 49, 0.2); }
.fixed-widget-list li.Flickr { background-image: none; background-color: transparent; }
.fixed-widget-list li.share.active { background-position: center; }
/* Arjang: pin the widget to the left edge of the site column (the skin keeps a ~420px column centred on desktop) */
.fixed-widget-list { left: max(13px, calc(50% - 210px + 13px)); }
body.personabar-visible .fixed-widget-list { left: max(13px, calc(50% - 40px - 210px + 13px)); }
/* music item: play triangle (Figma) / pause bars while playing */
.fixed-widget-list li.Flickr.is-playing a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='24' fill='%23C49E31' fill-opacity='.2'/%3E%3Crect x='17' y='15' width='4.5' height='18' rx='1.5' fill='%23FFEBC9'/%3E%3Crect x='26.5' y='15' width='4.5' height='18' rx='1.5' fill='%23FFEBC9'/%3E%3C/svg%3E"); transform: none; }
/* Arjang: full Figma size on phones too (the plugin scales the list to 71% under 768px) */
@media only screen and (max-width: 767px) {
	.fixed-widget-list { left: 13px; transform: none; }
}
/* Figma glass: translucent gold, frosted backdrop, thin light rim */
.fixed-widget-list li.share,
.fixed-widget-list li.rss,
.fixed-widget-list li.WhatsApp {
	background-color: rgba(196, 158, 49, 0.28);
	border: 1px solid rgba(255, 235, 201, 0.6);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	backdrop-filter: blur(10px) saturate(1.4);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.fixed-widget-list li.Flickr { border-radius: 50%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }