/* ============================================================
   GB Social Links — Frontend Floating Buttons
   ============================================================ */

/* ---- Container ---- */
.gb-sl-wrap {
	position: fixed;
	z-index: 99999;
	display: flex;
	gap: 6px;
	pointer-events: none;
}
.gb-sl-wrap * { box-sizing: border-box; }
.gb-sl-wrap .gb-sl-btn { pointer-events: all; }

/* ============================================================
   Positions
   ============================================================ */

/* CENTER LEFT */
.gb-sl-wrap.position-left {
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	flex-direction: column;
	align-items: flex-start;
}

/* CENTER RIGHT */
.gb-sl-wrap.position-right {
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	flex-direction: column;
	align-items: flex-end;
}

/* TOP LEFT */
.gb-sl-wrap.position-top-left {
	left: 16px;
	top: 80px;
	flex-direction: column;
	align-items: flex-start;
}

/* TOP RIGHT */
.gb-sl-wrap.position-top-right {
	right: 16px;
	top: 80px;
	flex-direction: column;
	align-items: flex-end;
}

/* BOTTOM LEFT */
.gb-sl-wrap.position-bottom-left {
	left: 16px;
	bottom: 24px;
	flex-direction: column;
	align-items: flex-start;
}

/* BOTTOM RIGHT */
.gb-sl-wrap.position-bottom-right {
	right: 16px;
	bottom: 24px;
	flex-direction: column;
	align-items: flex-end;
}

/* TOP CENTER */
.gb-sl-wrap.position-top-center {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	flex-direction: row;
	align-items: flex-start;
}

/* BOTTOM CENTER */
.gb-sl-wrap.position-bottom-center {
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	flex-direction: row;
	align-items: flex-end;
}

/* ============================================================
   Button Base
   ============================================================ */
.gb-sl-btn {
	display: flex;
	align-items: center;
	text-decoration: none !important;
	overflow: hidden;
	border-radius: 0 8px 8px 0;
	box-shadow:
		0 4px 6px -1px rgba(0,0,0,.18),
		0 8px 20px -4px rgba(0,0,0,.14),
		0 0 0 1px rgba(0,0,0,.06);
	transition: transform .2s ease, box-shadow .2s ease;
	position: relative;
	max-width: 52px; /* collapsed */
}
.gb-sl-btn:hover {
	transform: scale(1.04);
	box-shadow:
		0 8px 20px -2px rgba(0,0,0,.25),
		0 12px 30px -6px rgba(0,0,0,.2),
		0 0 0 1px rgba(0,0,0,.08);
}

/* Flip border-radius for right-side positions */
.position-right .gb-sl-btn,
.position-top-right .gb-sl-btn,
.position-bottom-right .gb-sl-btn {
	border-radius: 8px 0 0 8px;
	flex-direction: row-reverse;
}

/* Top/Bottom center – no rounded clipping needed */
.position-top-center .gb-sl-btn,
.position-bottom-center .gb-sl-btn {
	border-radius: 0 0 10px 10px;
	flex-direction: column;
	max-width: unset;
}

/* ---- Icon ---- */
.gb-sl-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--btn-color, #333);
	color: #fff;
	transition: background-color .2s ease;
}

/* Sizes */
.gb-sl-wrap.size-small  .gb-sl-icon { width: 40px; height: 40px; }
.gb-sl-wrap.size-medium .gb-sl-icon { width: 50px; height: 50px; }
.gb-sl-wrap.size-large  .gb-sl-icon { width: 62px; height: 62px; }

.gb-sl-icon svg   { width: 52%; height: 52%; }
.gb-sl-img-icon   { width: 52%; height: 52%; object-fit: contain; }
.gb-sl-emoji-icon { font-size: 58%; line-height: 1; }

/* ---- Label ---- */
.gb-sl-label {
	background-color: var(--btn-color, #333);
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	max-width: 0;
	padding: 0;
	opacity: 0;
	transition: max-width .25s ease, padding .25s ease, opacity .2s ease .05s;
}

.gb-sl-wrap.size-small  .gb-sl-label { font-size: 11px; }
.gb-sl-wrap.size-medium .gb-sl-label { font-size: 13px; }
.gb-sl-wrap.size-large  .gb-sl-label { font-size: 15px; }

/* Reveal label on hover — left/corner positions */
.position-left .gb-sl-btn:hover .gb-sl-label,
.position-top-left .gb-sl-btn:hover .gb-sl-label,
.position-bottom-left .gb-sl-btn:hover .gb-sl-label {
	max-width: 160px;
	padding: 0 14px;
	opacity: 1;
}

/* Reveal label on hover — right positions */
.position-right .gb-sl-btn:hover .gb-sl-label,
.position-top-right .gb-sl-btn:hover .gb-sl-label,
.position-bottom-right .gb-sl-btn:hover .gb-sl-label {
	max-width: 160px;
	padding: 0 14px;
	opacity: 1;
}

/* Top/Bottom center — label appears below/above icon */
.position-top-center .gb-sl-btn,
.position-bottom-center .gb-sl-btn {
	max-width: unset;
}
.position-top-center .gb-sl-label,
.position-bottom-center .gb-sl-label {
	max-width: unset;
	width: 100%;
	text-align: center;
	max-height: 0;
	padding: 0 10px;
	opacity: 0;
	transition: max-height .25s ease, padding .25s ease, opacity .2s ease;
}
.position-top-center .gb-sl-btn:hover .gb-sl-label,
.position-bottom-center .gb-sl-btn:hover .gb-sl-label {
	max-height: 40px;
	padding: 6px 10px;
	opacity: 1;
}

/* ============================================================
   Entry Animations
   ============================================================ */
@keyframes gb-slide-in-left {
	from { transform: translateX(-100%); opacity: 0; }
	to   { transform: translateX(0);     opacity: 1; }
}
@keyframes gb-slide-in-right {
	from { transform: translateX(100%); opacity: 0; }
	to   { transform: translateX(0);    opacity: 1; }
}
@keyframes gb-slide-in-top {
	from { transform: translateY(-100%); opacity: 0; }
	to   { transform: translateY(0);     opacity: 1; }
}
@keyframes gb-slide-in-bottom {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.position-left .gb-sl-btn,
.position-top-left .gb-sl-btn,
.position-bottom-left .gb-sl-btn {
	animation: gb-slide-in-left .4s ease both;
}
.position-right .gb-sl-btn,
.position-top-right .gb-sl-btn,
.position-bottom-right .gb-sl-btn {
	animation: gb-slide-in-right .4s ease both;
}
.position-top-center .gb-sl-btn {
	animation: gb-slide-in-top .4s ease both;
}
.position-bottom-center .gb-sl-btn {
	animation: gb-slide-in-bottom .4s ease both;
}

/* Stagger animation per button */
.gb-sl-wrap .gb-sl-btn:nth-child(1)  { animation-delay: .05s; }
.gb-sl-wrap .gb-sl-btn:nth-child(2)  { animation-delay: .10s; }
.gb-sl-wrap .gb-sl-btn:nth-child(3)  { animation-delay: .15s; }
.gb-sl-wrap .gb-sl-btn:nth-child(4)  { animation-delay: .20s; }
.gb-sl-wrap .gb-sl-btn:nth-child(5)  { animation-delay: .25s; }
.gb-sl-wrap .gb-sl-btn:nth-child(6)  { animation-delay: .30s; }
.gb-sl-wrap .gb-sl-btn:nth-child(7)  { animation-delay: .35s; }
.gb-sl-wrap .gb-sl-btn:nth-child(8)  { animation-delay: .40s; }
.gb-sl-wrap .gb-sl-btn:nth-child(9)  { animation-delay: .45s; }
.gb-sl-wrap .gb-sl-btn:nth-child(10) { animation-delay: .50s; }

/* ============================================================
   Responsive — shrink on mobile
   ============================================================ */
@media (max-width: 480px) {
	.gb-sl-wrap.size-medium .gb-sl-icon { width: 42px; height: 42px; }
	.gb-sl-wrap.size-large  .gb-sl-icon { width: 50px; height: 50px; }
}

/* ============================================================
   Reduced-motion support
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.gb-sl-btn, .gb-sl-label { animation: none !important; transition: none !important; }
}