/* ============================================================
   Sticky Icons WP — Frontend Styles
   ~3KB minified
   ============================================================ */

/* Grup sticky — gestionează DOAR poziționarea și offset-ul.
   Nu conține animații (transform-ul de animație ar suprascrie offset-ul). */
#siwp-group {
	position: fixed;
	z-index: 9999;
	list-style: none;
	margin: 0;
	padding: 0;
	/* Fallback de poziție — suprascris de CSS-ul dinamic generat de plugin */
	bottom: 20px;
	right: 20px;
	top: auto;
	left: auto;
}

/* Inner wrapper — preia layout-ul flex și animațiile de intrare.
   Animațiile aplică transform pe .siwp-inner, nu pe #siwp-group,
   astfel încât transform-ul de offset al grupului nu este suprasscris. */
#siwp-group .siwp-inner {
	display: flex;
	flex-direction: column; /* suprascris de CSS dinamic via flex-direction */
	gap: var(--siwp-gap, 10px);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Buton individual */
#siwp-group .siwp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--siwp-size, 56px);
	height: var(--siwp-size, 56px);
	border-radius: var(--siwp-radius, 50%);
	background-color: #333;
	box-shadow: var(--siwp-shadow, 0 4px 16px rgba(0,0,0,.25));
	text-decoration: none;
	position: relative;
	flex-shrink: 0;
	transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background-color .2s;
	cursor: pointer;
	border: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

#siwp-group .siwp-btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Icon */
#siwp-group .siwp-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	pointer-events: none;
}
#siwp-group .siwp-btn-icon svg {
	width: 28px;
	height: 28px;
}
#siwp-group .siwp-btn-icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

/* Tooltip */
#siwp-group .siwp-btn-tooltip {
	position: absolute;
	right: calc(var(--siwp-size, 56px) + 10px);
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,.78);
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	white-space: nowrap;
	padding: 5px 10px;
	border-radius: 5px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
	transform: translateY(-50%) translateX(4px);
}
#siwp-group .siwp-btn-tooltip::after {
	content: '';
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-left-color: rgba(0,0,0,.78);
}
#siwp-group .siwp-btn:hover .siwp-btn-tooltip,
#siwp-group .siwp-btn:focus-visible .siwp-btn-tooltip {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* Tooltip pentru grup pe stânga — apare la dreapta butonului */
#siwp-group.siwp-left .siwp-btn-tooltip {
	right: auto;
	left: calc(var(--siwp-size, 56px) + 10px);
	transform: translateY(-50%) translateX(-4px); /* intră din stânga */
}
#siwp-group.siwp-left .siwp-btn-tooltip::after {
	left: auto;
	right: 100%;
	border-left-color: transparent;
	border-right-color: rgba(0,0,0,.78);
}
#siwp-group.siwp-left .siwp-btn:hover .siwp-btn-tooltip,
#siwp-group.siwp-left .siwp-btn:focus-visible .siwp-btn-tooltip {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* ================================================================
   ANIMAȚII DE INTRARE — aplicate pe .siwp-inner, NU pe #siwp-group.
   Astfel transform-ul de animație nu suprascrie offset-ul de pe #siwp-group.
================================================================ */

/* slide — din dreapta */
#siwp-group.siwp-enter-slide .siwp-inner {
	animation: siwp-slide-in .5s cubic-bezier(.22,.61,.36,1) both;
	animation-delay: .3s;
}
@keyframes siwp-slide-in {
	from { transform: translateX(80px); opacity: 0; }
	to   { transform: translateX(0);    opacity: 1; }
}

/* slide pentru grupe pe stânga */
#siwp-group.siwp-left.siwp-enter-slide .siwp-inner {
	animation-name: siwp-slide-in-left;
}
@keyframes siwp-slide-in-left {
	from { transform: translateX(-80px); opacity: 0; }
	to   { transform: translateX(0);     opacity: 1; }
}

/* fade */
#siwp-group.siwp-enter-fade .siwp-inner {
	animation: siwp-fade-in .6s ease both;
	animation-delay: .3s;
}
@keyframes siwp-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* bounce */
#siwp-group.siwp-enter-bounce .siwp-inner {
	animation: siwp-bounce-in .7s cubic-bezier(.36,.07,.19,.97) both;
	animation-delay: .2s;
}
@keyframes siwp-bounce-in {
	0%   { transform: scale(.3);   opacity: 0; }
	50%  { transform: scale(1.05); opacity: .8; }
	70%  { transform: scale(.95); }
	100% { transform: scale(1);    opacity: 1; }
}

/* ================================================================
   ANIMAȚII HOVER — aplicate din CSS dinamic
================================================================ */

/* pulse keyframes (folosit de hover=pulse) */
@keyframes siwp-pulse {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.12); }
}

/* ================================================================
   SPEED DIAL
================================================================ */
#siwp-group.siwp-speed-dial .siwp-btn:not(.siwp-speed-dial-trigger) {
	transform: scale(0);
	opacity: 0;
	pointer-events: none;
	transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
#siwp-group.siwp-speed-dial.siwp-sd-open .siwp-btn:not(.siwp-speed-dial-trigger) {
	transform: scale(1);
	opacity: 1;
	pointer-events: auto;
}
/* Stagger animation pentru butoanele speed dial */
#siwp-group.siwp-speed-dial.siwp-sd-open .siwp-btn:not(.siwp-speed-dial-trigger):nth-child(2) { transition-delay: .05s; }
#siwp-group.siwp-speed-dial.siwp-sd-open .siwp-btn:not(.siwp-speed-dial-trigger):nth-child(3) { transition-delay: .1s; }
#siwp-group.siwp-speed-dial.siwp-sd-open .siwp-btn:not(.siwp-speed-dial-trigger):nth-child(4) { transition-delay: .15s; }
#siwp-group.siwp-speed-dial.siwp-sd-open .siwp-btn:not(.siwp-speed-dial-trigger):nth-child(5) { transition-delay: .2s; }
#siwp-group.siwp-speed-dial.siwp-sd-open .siwp-btn:not(.siwp-speed-dial-trigger):nth-child(6) { transition-delay: .25s; }

/* Trigger icon: + devine − */
#siwp-group .siwp-speed-dial-trigger {
	background: #333;
	border-radius: 50%;
	order: -1; /* Apare primul */
}
#siwp-group .siwp-sd-icon-close { display: none; }
#siwp-group.siwp-sd-open .siwp-sd-icon-open  { display: none; }
#siwp-group.siwp-sd-open .siwp-sd-icon-close { display: flex; }
#siwp-group.siwp-sd-open .siwp-speed-dial-trigger { transform: rotate(45deg); }

/* ================================================================
   VISIBILITY: hide on mobile / hide on desktop
================================================================ */
@media (max-width: 768px) {
	#siwp-group.siwp-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
	#siwp-group.siwp-hide-desktop { display: none !important; }
}

/* ================================================================
   REDUCED MOTION — respectă preferințele utilizatorului
================================================================ */
@media (prefers-reduced-motion: reduce) {
	#siwp-group,
	#siwp-group .siwp-inner,
	#siwp-group .siwp-btn,
	#siwp-group .siwp-btn-tooltip {
		animation: none !important;
		transition: none !important;
	}
}