/* Sharebolt frontend styles. Scoped under .sharebolt to avoid theme conflicts. */

.sharebolt {
	--sb-gap: 8px;
	--sb-radius: 8px;
	--sb-btn-h: 36px;
	--sb-btn-px: 12px;
	--sb-font: 14px;
	--sb-icon: 16px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	margin: 20px 0;
	color: inherit;
}

.sharebolt__headline {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
	margin-bottom: 8px;
}

.sharebolt__total {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 10px;
	padding: 6px 14px;
	background: #f3f4f6;
	border-radius: 999px;
	font-size: 13px;
	color: #374151;
	line-height: 1;
}
.sharebolt__total strong { font-size: 18px; font-weight: 700; color: #111827; }

.sharebolt__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sb-gap);
}
.sharebolt__item { margin: 0; padding: 0; }

.sharebolt__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: var(--sb-btn-h);
	padding: 0 var(--sb-btn-px);
	background: var(--sb-brand, #111827);
	color: #ffffff;
	border: 0;
	border-radius: var(--sb-radius);
	font-size: var(--sb-font);
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .18s ease, opacity .12s ease, filter .12s ease;
	line-height: 1;
	white-space: nowrap;
}
.sharebolt__btn:hover  { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); filter: brightness(1.05); color: #ffffff; }
.sharebolt__btn:active { transform: translateY(0); box-shadow: none; }
.sharebolt__btn:focus-visible { outline: 2px solid var(--sb-brand, #111827); outline-offset: 3px; }

.sharebolt__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sb-icon);
	height: var(--sb-icon);
}
.sharebolt__icon svg { width: 100%; height: 100%; display: block; }

.sharebolt__label { line-height: 1; }
.sharebolt__count {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	background: rgba(255, 255, 255, .22);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	min-width: 18px;
	justify-content: center;
}

/* ---- Sizes ---- */
.sharebolt--size-sm { --sb-btn-h: 30px; --sb-btn-px: 10px; --sb-font: 12px; --sb-icon: 14px; --sb-gap: 6px; }
.sharebolt--size-lg { --sb-btn-h: 44px; --sb-btn-px: 16px; --sb-font: 15px; --sb-icon: 18px; --sb-gap: 10px; }

/* ---- Shapes ---- */
.sharebolt--shape-pill   .sharebolt__btn { border-radius: 999px; }
.sharebolt--shape-square .sharebolt__btn { border-radius: 4px; }
.sharebolt--shape-circle .sharebolt__btn { border-radius: 999px; width: var(--sb-btn-h); padding: 0; justify-content: center; }
.sharebolt--shape-circle .sharebolt__label,
.sharebolt--shape-circle .sharebolt__count { display: none; }

/* ---- Color styles ---- */
.sharebolt--style-outline .sharebolt__btn {
	background: transparent;
	color: var(--sb-brand);
	box-shadow: inset 0 0 0 1.5px var(--sb-brand);
}
.sharebolt--style-outline .sharebolt__btn:hover { background: var(--sb-brand); color: #fff; }
.sharebolt--style-outline .sharebolt__count { background: color-mix( in srgb, var(--sb-brand) 12%, transparent ); color: var(--sb-brand); }
.sharebolt--style-outline .sharebolt__btn:hover .sharebolt__count { background: rgba(255, 255, 255, .22); color: #fff; }

.sharebolt--style-mono-dark  .sharebolt__btn { background: #111827; color: #ffffff; }
.sharebolt--style-mono-light .sharebolt__btn { background: #f3f4f6; color: #111827; }
.sharebolt--style-mono-light .sharebolt__count { background: #e5e7eb; color: #111827; }

/* ---- No labels ---- */
.sharebolt--no-labels .sharebolt__label { display: none; }
.sharebolt--no-counts .sharebolt__count { display: none; }

/* ---- Alignments ---- */
.sharebolt--align-center .sharebolt__list { justify-content: center; }
.sharebolt--align-right  .sharebolt__list { justify-content: flex-end; }
.sharebolt--align-center { text-align: center; }
.sharebolt--align-right  { text-align: right; }

/* ---- Layouts ---- */

/* Inline layout: total sits on the same row as the buttons, at the start.
   Headline (if present) stays on its own line above via flex-basis:100%. */
.sharebolt--layout-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px var(--sb-gap);
}
.sharebolt--layout-inline > .sharebolt__headline {
	flex: 1 1 100%;
	margin-bottom: 0;
}
.sharebolt--layout-inline > .sharebolt__total {
	margin-bottom: 0;
	flex: 0 0 auto;
}
.sharebolt--layout-inline > .sharebolt__list {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.sharebolt--layout-vertical .sharebolt__list {
	flex-direction: column;
	align-items: flex-start;
}
.sharebolt--layout-vertical.sharebolt--align-center .sharebolt__list { align-items: center; }
.sharebolt--layout-vertical.sharebolt--align-right  .sharebolt__list { align-items: flex-end; }
.sharebolt--layout-vertical .sharebolt__btn { min-width: 160px; }

/* Floating left rail on desktop. */
.sharebolt--layout-floating {
	position: fixed;
	top: 30%;
	left: 12px;
	z-index: 90;
	margin: 0;
	background: #fff;
	padding: 10px;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
}
.sharebolt--layout-floating .sharebolt__list { flex-direction: column; align-items: stretch; }
.sharebolt--layout-floating .sharebolt__headline,
.sharebolt--layout-floating .sharebolt__total  { display: none; }
@media (max-width: 900px) {
	.sharebolt--layout-floating { position: static; box-shadow: none; padding: 0; background: transparent; }
	.sharebolt--layout-floating .sharebolt__list { flex-direction: row; }
}

/* Sticky mobile bottom bar. */
.sharebolt--layout-sticky-mobile { display: none; }
@media (max-width: 720px) {
	.sharebolt--layout-sticky-mobile {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 95;
		margin: 0;
		background: #ffffff;
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -8px 24px rgba(0, 0, 0, .10);
	}
	.sharebolt--layout-sticky-mobile .sharebolt__headline,
	.sharebolt--layout-sticky-mobile .sharebolt__total { display: none; }
	.sharebolt--layout-sticky-mobile .sharebolt__list  { justify-content: space-around; flex-wrap: nowrap; overflow-x: auto; }
	.sharebolt--layout-sticky-mobile .sharebolt__btn   { flex-shrink: 0; }
}

/* Flash state after copy. */
.sharebolt__btn.is-flashed { animation: sharebolt-pulse .5s ease; }
@keyframes sharebolt-pulse {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.06); }
	100% { transform: scale(1); }
}