/* KL Social Share — front-end styles
   Brand defaults: gold #FBD028, dark #252525, on white. Colors are driven by
   CSS variables injected inline so the admin color pickers take effect. */

:root{
	--klss-accent:#FBD028;
	--klss-icon:#252525;
	--klss-icon-hover:#FBD028;
	--klss-text:#252525;
	--klss-radius:8px;
	--klss-gap:8px;
}

/* Per-network brand colors used on hover fill */
.klss-btn-pinterest{--klss-net:#E60023;}
.klss-btn-facebook{--klss-net:#1877F2;}
.klss-btn-twitter{--klss-net:#000000;}
.klss-btn-linkedin{--klss-net:#0A66C2;}

/* ---------- Panel ---------- */
.klss-panel{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:var(--klss-gap);
	margin:1.5em 0;
	font-family:inherit;
	line-height:1;
}
.klss-archive-wrap{margin:1.5em auto;max-width:1200px;padding:0 16px;}

/* ---------- Buttons ---------- */
.klss-btn{
	--size:44px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-width:var(--size);
	height:var(--size);
	padding:0 12px;
	background:#fff;
	color:var(--klss-icon);
	border:1.5px solid var(--klss-icon);
	border-radius:var(--klss-radius);
	text-decoration:none;
	cursor:pointer;
	transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease;
	-webkit-tap-highlight-color:transparent;
}
.klss-btn:hover,.klss-btn:focus-visible{
	background:var(--klss-net);
	border-color:var(--klss-net);
	color:#fff;
	transform:translateY(-1px);
	outline:none;
}
.klss-btn .klss-ico{display:inline-flex;width:20px;height:20px;}
.klss-btn .klss-ico svg{width:100%;height:100%;fill:currentColor;}
.klss-btn .klss-label{font-size:14px;font-weight:600;letter-spacing:.02em;}
.klss-btn .klss-count{font-size:13px;font-weight:700;min-width:1ch;}
.klss-count-hidden{display:none !important;}

/* Sizes */
.klss-size-small .klss-btn{--size:36px;padding:0 9px;}
.klss-size-small .klss-btn .klss-ico{width:17px;height:17px;}
.klss-size-large .klss-btn{--size:54px;padding:0 16px;}
.klss-size-large .klss-btn .klss-ico{width:24px;height:24px;}

/* Shapes */
.klss-shape-square .klss-btn{border-radius:0;}
.klss-shape-rounded .klss-btn{border-radius:8px;}
.klss-shape-pill .klss-btn{border-radius:999px;}
.klss-shape-circle .klss-btn{border-radius:50%;padding:0;min-width:var(--size);width:var(--size);}
.klss-shape-circle .klss-btn .klss-label,
.klss-shape-circle .klss-btn .klss-count{display:none;}

/* Total shares badge */
.klss-total{
	display:inline-flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:4px 12px;
	border-radius:var(--klss-radius);
	background:var(--klss-text);
	color:#fff;
	line-height:1.1;
}
.klss-total-num{font-size:16px;font-weight:800;}
.klss-total-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.85;}

/* ---------- Sticky side panel ---------- */
.klss-side{
	position:fixed;
	top:50%;
	transform:translateY(-50%);
	z-index:9990;
	flex-direction:column;
	gap:6px;
	margin:0;
	padding:6px;
}
.klss-side-left{left:0;border-radius:0 var(--klss-radius) var(--klss-radius) 0;}
.klss-side-right{right:0;border-radius:var(--klss-radius) 0 0 var(--klss-radius);}
.klss-side .klss-btn{
	--size:42px;
	border-radius:6px;
	padding:0;
	min-width:var(--size);
	width:var(--size);
}
.klss-side .klss-btn .klss-label{display:none;}
.klss-side .klss-btn .klss-count{
	position:absolute;
	font-size:10px;
	font-weight:800;
	background:var(--klss-accent);
	color:#252525;
	border-radius:999px;
	padding:1px 5px;
	transform:translate(60%,-90%);
	pointer-events:none;
}
.klss-side .klss-btn{position:relative;}
.klss-side .klss-total{display:none;}

/* Mobile: smaller side icons, no labels, optionally hidden */
@media (max-width:600px){
	.klss-side .klss-btn{--size:38px;}
	.klss-side-hide-mobile{display:none !important;}
	.klss-btn .klss-label{display:none;}
}

/* ---------- Pinterest lightbox ---------- */
.klss-lb-overlay{
	position:fixed;inset:0;z-index:100000;
	background:rgba(20,20,20,.72);
	display:flex;align-items:center;justify-content:center;
	padding:20px;
	animation:klss-fade .15s ease;
}
@keyframes klss-fade{from{opacity:0}to{opacity:1}}
.klss-lb-box{
	background:#fff;border-radius:12px;
	max-width:860px;width:100%;max-height:86vh;
	display:flex;flex-direction:column;overflow:hidden;
	box-shadow:0 24px 64px rgba(0,0,0,.35);
}
.klss-lb-head{
	display:flex;align-items:center;justify-content:space-between;
	padding:16px 20px;border-bottom:1px solid #eee;
	font-weight:700;color:var(--klss-text);font-size:16px;
}
.klss-lb-close{
	background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:#888;
	padding:0 4px;
}
.klss-lb-close:hover{color:#222;}
.klss-lb-grid{
	display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
	gap:12px;padding:20px;overflow:auto;
}
.klss-lb-item{
	border:2px solid transparent;border-radius:10px;overflow:hidden;
	cursor:pointer;background:#f4f4f4;padding:0;aspect-ratio:1/1;
	transition:border-color .15s ease,transform .12s ease;
}
.klss-lb-item:hover{border-color:var(--klss-accent);transform:translateY(-2px);}
.klss-lb-item img{width:100%;height:100%;object-fit:cover;display:block;}

@media (max-width:600px){
	.klss-lb-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;padding:14px;}
}