/* Sticky Sidebar Buttons - Frontend
 * Dynamic values (position, size, colors, presets) are injected as inline CSS / CSS vars.
 * Everything here is hardened against theme interference (forced colors, no inherited link styles).
 */

.ssb-wrap, .ssb-wrap * { box-sizing: border-box; }

/* ---------------- Base button ---------------- */
.ssb-wrap .ssb-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ssb-size, 54px);
	height: var(--ssb-size, 54px);
	min-width: var(--ssb-size, 54px);
	border-radius: var(--ssb-radius, 14px);
	border: var(--ssb-border, none);
	background: var(--ssb-bg, #2563eb);
	box-shadow: var(--ssb-shadow, 0 6px 22px rgba(15,23,42,.20));
	overflow: hidden;
	cursor: pointer;
	line-height: 1;
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
	transition: width .3s cubic-bezier(.2,.7,.3,1),
	            transform .22s cubic-bezier(.2,.7,.3,1),
	            background-color .2s ease,
	            box-shadow .25s ease;
	will-change: transform;
}

/* ---- Hardened theme resets (kills inherited blue link color, underline, etc.) ---- */
.ssb-wrap .ssb-btn,
.ssb-wrap .ssb-btn:link,
.ssb-wrap .ssb-btn:visited,
.ssb-wrap .ssb-btn:hover,
.ssb-wrap .ssb-btn:focus,
.ssb-wrap .ssb-btn:active {
	color: var(--ssb-color, #fff) !important;
	text-decoration: none !important;
	outline: none;
}
.ssb-wrap .ssb-btn .ssb-label,
.ssb-wrap .ssb-btn .ssb-icon,
.ssb-wrap .ssb-btn .ssb-icon .dashicons,
.ssb-wrap .ssb-btn .ssb-icon svg,
.ssb-wrap .ssb-btn .ssb-icon i {
	color: var(--ssb-color, #fff) !important;
	fill: currentColor;
}

/* Transform origin so scale/lift never pushes off-screen */
.ssb-pos-right .ssb-btn { transform-origin: right center; }
.ssb-pos-left  .ssb-btn { transform-origin: left center; }

/* ---------------- Icon ---------------- */
.ssb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--ssb-size, 54px);
	width: var(--ssb-size, 54px);
	height: var(--ssb-size, 54px);
	transition: transform .25s ease;
}
.ssb-icon .dashicons {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ssb-icon img { display: block; border-radius: 4px; }

/* ---------------- Label ---------------- */
.ssb-label {
	white-space: nowrap;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: .01em;
	padding-right: 18px;
	padding-left: 2px;
	opacity: 0;
}
.ssb-pos-left .ssb-label { padding-left: 18px; padding-right: 2px; }

/* ============================================================
 * STYLE PRESETS
 * ============================================================ */

/* Flat */
.ssb-preset-flat .ssb-btn { background: var(--ssb-bg) !important; }
.ssb-preset-flat .ssb-btn:hover { background: var(--ssb-hover) !important; }

/* Soft (default): colored soft glow shadow */
.ssb-preset-soft .ssb-btn {
	background: var(--ssb-bg) !important;
	box-shadow: 0 12px 26px -8px var(--ssb-pulse), 0 4px 10px rgba(15,23,42,.12);
}
.ssb-preset-soft .ssb-btn:hover {
	background: var(--ssb-hover) !important;
	box-shadow: 0 16px 32px -8px var(--ssb-pulse), 0 6px 14px rgba(15,23,42,.16);
}

/* Glass: frosted translucent */
.ssb-preset-glass .ssb-btn {
	background: var(--ssb-glass) !important;
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	backdrop-filter: blur(10px) saturate(160%);
	border: 1px solid rgba(255,255,255,.4) !important;
	box-shadow: 0 10px 30px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.3);
}
.ssb-preset-glass .ssb-btn:hover { background: var(--ssb-bg) !important; }

/* Outline: bordered, fills on hover */
.ssb-preset-outline .ssb-btn {
	background: transparent !important;
	border: 2px solid var(--ssb-bg) !important;
}
.ssb-preset-outline .ssb-btn,
.ssb-preset-outline .ssb-btn .ssb-label,
.ssb-preset-outline .ssb-btn .ssb-icon,
.ssb-preset-outline .ssb-btn .ssb-icon .dashicons,
.ssb-preset-outline .ssb-btn .ssb-icon svg,
.ssb-preset-outline .ssb-btn .ssb-icon i {
	color: var(--ssb-bg) !important;
}
.ssb-preset-outline .ssb-btn:hover { background: var(--ssb-bg) !important; }
.ssb-preset-outline .ssb-btn:hover,
.ssb-preset-outline .ssb-btn:hover .ssb-label,
.ssb-preset-outline .ssb-btn:hover .ssb-icon .dashicons,
.ssb-preset-outline .ssb-btn:hover .ssb-icon svg,
.ssb-preset-outline .ssb-btn:hover .ssb-icon i {
	color: var(--ssb-color) !important;
}

/* Gradient preset (all buttons) */
.ssb-preset-gradient .ssb-btn {
	background: linear-gradient(135deg, var(--ssb-bg), var(--ssb-bg2)) !important;
}
.ssb-preset-gradient .ssb-btn:hover { filter: brightness(1.06); }

/* Per-button gradient (overrides preset background; placed after presets on purpose) */
.ssb-wrap .ssb-btn.ssb-has-gradient {
	background: linear-gradient(135deg, var(--ssb-bg), var(--ssb-bg2)) !important;
}
.ssb-wrap .ssb-btn.ssb-has-gradient:hover { filter: brightness(1.07); }

/* ============================================================
 * HOVER EFFECTS
 * ============================================================ */
.ssb-hover-grow .ssb-btn:hover  { transform: scale(1.09); }
.ssb-hover-lift .ssb-btn:hover  { transform: translateY(-4px); box-shadow: 0 18px 34px -10px var(--ssb-pulse), 0 8px 16px rgba(15,23,42,.18); }
.ssb-hover-glow .ssb-btn:hover  { box-shadow: 0 0 0 4px var(--ssb-pulse), 0 8px 22px rgba(15,23,42,.22); }
.ssb-hover-rotate-icon .ssb-btn:hover .ssb-icon { transform: rotate(18deg) scale(1.12); }
.ssb-hover-shake .ssb-btn:hover .ssb-icon { animation: ssbShake .5s ease; }

@keyframes ssbShake {
	0%,100% { transform: translateX(0); }
	20% { transform: translateX(-2px) rotate(-6deg); }
	40% { transform: translateX(2px) rotate(6deg); }
	60% { transform: translateX(-2px) rotate(-4deg); }
	80% { transform: translateX(2px) rotate(4deg); }
}

/* ============================================================
 * ATTENTION PULSE (per button) — box-shadow ring (not clipped by overflow)
 * ============================================================ */
.ssb-wrap .ssb-btn.ssb-has-pulse {
	animation: ssbPulse 2.2s cubic-bezier(.66,0,0,1) infinite;
}
@keyframes ssbPulse {
	0%   { box-shadow: 0 6px 18px rgba(15,23,42,.18), 0 0 0 0 var(--ssb-pulse); }
	70%  { box-shadow: 0 6px 18px rgba(15,23,42,.18), 0 0 0 16px rgba(0,0,0,0); }
	100% { box-shadow: 0 6px 18px rgba(15,23,42,.18), 0 0 0 0 rgba(0,0,0,0); }
}

/* ============================================================
 * REVEAL MODES
 * ============================================================ */
/* Slide label out on hover */
.ssb-reveal-slide .ssb-btn { width: var(--ssb-size, 54px); }
.ssb-reveal-slide .ssb-btn:hover,
.ssb-reveal-slide .ssb-btn:focus-visible { width: auto; max-width: 340px; }
.ssb-reveal-slide .ssb-btn:hover .ssb-label,
.ssb-reveal-slide .ssb-btn:focus-visible .ssb-label {
	opacity: 1;
	transition: opacity .22s ease .1s;
}

/* Always show labels (pill) */
.ssb-reveal-always .ssb-btn { width: auto; max-width: 340px; }
.ssb-reveal-always .ssb-label { opacity: 1; }

/* Icon only */
.ssb-reveal-none .ssb-label { display: none; }

/* Tooltip */
.ssb-reveal-tooltip .ssb-btn { overflow: visible; }
.ssb-reveal-tooltip .ssb-label {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: #111827;
	color: #fff !important;
	padding: 7px 11px;
	border-radius: 8px;
	opacity: 0;
	pointer-events: none;
	font-size: 13px;
	box-shadow: 0 6px 18px rgba(0,0,0,.22);
	transition: opacity .18s ease, transform .18s ease;
}
.ssb-reveal-tooltip.ssb-pos-right .ssb-label { right: calc(100% + 12px); }
.ssb-reveal-tooltip.ssb-pos-left  .ssb-label { left: calc(100% + 12px); }
.ssb-reveal-tooltip.ssb-pos-right .ssb-label::after {
	content: ""; position: absolute; top: 50%; left: 100%;
	transform: translateY(-50%);
	border: 6px solid transparent; border-left-color: #111827;
}
.ssb-reveal-tooltip.ssb-pos-left .ssb-label::after {
	content: ""; position: absolute; top: 50%; right: 100%;
	transform: translateY(-50%);
	border: 6px solid transparent; border-right-color: #111827;
}
.ssb-reveal-tooltip .ssb-btn:hover .ssb-label,
.ssb-reveal-tooltip .ssb-btn:focus-visible .ssb-label { opacity: 1; }

/* ============================================================
 * ENTRANCE ANIMATIONS (skipped automatically for pulsing buttons)
 * ============================================================ */
.ssb-entrance-fade .ssb-btn:not(.ssb-has-pulse) { animation: ssbFade .55s ease both; }
.ssb-entrance-slide-in.ssb-pos-right .ssb-btn:not(.ssb-has-pulse) { animation: ssbSlideRight .55s cubic-bezier(.2,.7,.3,1) both; }
.ssb-entrance-slide-in.ssb-pos-left  .ssb-btn:not(.ssb-has-pulse) { animation: ssbSlideLeft .55s cubic-bezier(.2,.7,.3,1) both; }
.ssb-entrance-bounce .ssb-btn:not(.ssb-has-pulse) { animation: ssbBounce .6s cubic-bezier(.28,.84,.42,1) both; }

.ssb-btn:nth-child(1) { animation-delay: .05s; }
.ssb-btn:nth-child(2) { animation-delay: .12s; }
.ssb-btn:nth-child(3) { animation-delay: .19s; }
.ssb-btn:nth-child(4) { animation-delay: .26s; }
.ssb-btn:nth-child(5) { animation-delay: .33s; }
.ssb-btn:nth-child(6) { animation-delay: .40s; }

@keyframes ssbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ssbSlideRight { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ssbSlideLeft { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ssbBounce {
	0% { opacity: 0; transform: scale(.4); }
	60% { opacity: 1; transform: scale(1.12); }
	100% { transform: scale(1); }
}

/* ============================================================
 * DEVICE VISIBILITY (JS toggles classes on the wrap)
 * ============================================================ */
.ssb-wrap.ssb-hide-desktop.ssb-is-desktop { display: none !important; }
.ssb-wrap.ssb-hide-mobile.ssb-is-mobile  { display: none !important; }
.ssb-is-desktop .ssb-btn-hide-desktop { display: none !important; }
.ssb-is-mobile  .ssb-btn-hide-mobile  { display: none !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ssb-btn,
	.ssb-btn.ssb-has-pulse,
	.ssb-icon { animation: none !important; transition: background-color .2s ease, width .2s ease; }
}