/* QB - Fahwa Projects — social share (same component as QB - Courses System)
 * QB Studio — qusai.dev
 */
.qb-share{
	--sh-ink:#17202A;
	--sh-muted:#6b7280;
	--sh-line:#e8e9ee;
	--sh-ok:#2f8a5f;
	font-family:inherit;
}
.qb-share *{box-sizing:border-box;}

.qb-share__list{display:flex;align-items:center;gap:8px;}
.qb-share__btn{
	width:36px;height:36px;flex:0 0 auto;padding:0;
	display:inline-grid;place-items:center;
	border:1px solid var(--sh-line);border-radius:50%;
	background:#fff;color:var(--sh-muted);text-decoration:none;cursor:pointer;
	transition:color .3s cubic-bezier(.2,.7,.2,1),background-color .3s ease,border-color .3s ease,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;
}
.qb-share__btn svg{display:block;}
.qb-share__btn:hover,.qb-share__btn:focus-visible{
	color:var(--net,var(--sh-ink));
	background:var(--net-soft,rgba(23,32,42,.08));
	border-color:transparent;
	transform:translateY(-3px);
	box-shadow:0 14px 22px -14px var(--net,rgba(23,32,42,.55));
	outline:none;
}
.qb-share__btn:focus-visible{box-shadow:0 0 0 3px var(--net-soft,rgba(23,32,42,.12));transform:none;}
.qb-share__btn:active{transform:translateY(0);}
.qb-share__btn.is-done{color:var(--sh-ok);background:rgba(47,138,95,.12);border-color:transparent;}

.qb-share__toast{
	font-size:12.5px;font-weight:700;letter-spacing:.01em;color:var(--sh-ok);
	opacity:0;transform:translateY(-3px);transition:opacity .3s ease,transform .3s ease;
}
.qb-share__toast.is-in{opacity:1;transform:none;}

/* ---------- row (detail pages) ---------- */
.qb-share--row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;}
.qb-share__label{
	font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
	color:var(--sh-muted);
}

/* inside a case-study page — the same component, tuned to the page's warm tokens */
.qb-fpp-share .qb-share--panel{
	margin-inline:auto;
	background:linear-gradient(180deg,#fdfcfa 0%,var(--qb-fpp-soft,#f6f4f0) 100%);
	border-color:var(--qb-fpp-line,#e9e6e0);
}
.qb-fpp-share .qb-share__linkbox{border-color:var(--qb-fpp-line,#e9e6e0);}
.qb-fpp-share .qb-share__intro{color:var(--qb-fpp-muted,#6d6f73);}

/* ---------- panel (course detail section) ---------- */
.qb-share--panel{
	display:flex;flex-direction:column;gap:16px;
	background:linear-gradient(180deg,#fbfbfc 0%,#f6f7f9 100%);
	border:1px solid var(--sh-line);border-radius:20px;
	padding:clamp(20px,3vw,26px);
}
.qb-share__intro{margin:0;font-size:15.5px;line-height:1.75;color:#5b616a;max-width:62ch;}
.qb-share--panel .qb-share__list{flex-wrap:wrap;gap:10px;}
.qb-share__btn--pill{
	width:auto;height:44px;border-radius:999px;padding:0 18px;
	display:inline-flex;align-items:center;gap:9px;
	font-size:14px;font-weight:700;font-family:inherit;color:#3c4048;
}
.qb-share__btn--pill:hover,.qb-share__btn--pill:focus-visible{transform:translateY(-2px);}
.qb-share__name{white-space:nowrap;}

.qb-share__linkbox{
	display:flex;align-items:center;gap:12px;
	background:#fff;border:1px solid var(--sh-line);border-radius:14px;
	padding:8px 8px 8px 16px;
}
[dir="rtl"] .qb-share__linkbox{padding:8px 16px 8px 8px;}
.qb-share__link{
	flex:1;min-width:0;font-size:13.5px;color:#7a8089;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;
}
.qb-share__copybtn{
	flex:0 0 auto;border:none;border-radius:11px;padding:11px 20px;
	background:var(--sh-ink);color:#fff;font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer;
	transition:background-color .3s ease,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;
}
.qb-share__copybtn:hover,.qb-share__copybtn:focus-visible{background:var(--qb-fpp-accent,#C8973B);transform:translateY(-2px);box-shadow:0 14px 24px -16px rgba(200,151,59,.95);outline:none;}
.qb-share__copybtn.is-done{background:#2f8a5f;}

/* centered variant — matches the case-study page rhythm */
.qb-share--center{align-items:center;text-align:center;}
.qb-share--center .qb-share__intro{margin-inline:auto;}
.qb-share--center .qb-share__list{justify-content:center;}
.qb-share--center .qb-share__linkbox{width:100%;}

/* ---------- popover (cards) ---------- */
.qb-share--pop{position:relative;line-height:0;}
.qb-share__toggle{
	width:36px;height:36px;padding:0;border:none;border-radius:50%;
	display:grid;place-items:center;cursor:pointer;
	background:rgba(255,255,255,.94);color:var(--sh-ink);
	-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
	box-shadow:0 10px 24px -12px rgba(23,32,42,.55);
	transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .3s ease,color .3s ease;
}
.qb-share__toggle:hover,.qb-share__toggle:focus-visible{background:#fff;color:var(--qb-fpp-accent,#C8973B);transform:translateY(-2px);outline:none;}
.qb-share--pop.is-open .qb-share__toggle{background:#fff;color:var(--qb-fpp-accent,#C8973B);}

.qb-share__tray{
	position:absolute;bottom:calc(100% + 10px);inset-inline-end:0;z-index:6;
	display:flex;flex-direction:column;align-items:flex-end;gap:6px;
	background:#fff;border:1px solid var(--sh-line);border-radius:16px;padding:9px 10px;
	box-shadow:0 26px 52px -26px rgba(23,32,42,.5);
	opacity:0;visibility:hidden;transform:translateY(8px) scale(.96);transform-origin:bottom right;
	transition:opacity .28s cubic-bezier(.2,.7,.2,1),transform .28s cubic-bezier(.2,.7,.2,1),visibility .28s;
}
[dir="rtl"] .qb-share__tray{transform-origin:bottom left;align-items:flex-start;}
.qb-share__tray::after{
	content:"";position:absolute;bottom:-5px;inset-inline-end:14px;width:10px;height:10px;
	background:#fff;border-inline-end:1px solid var(--sh-line);border-bottom:1px solid var(--sh-line);
	transform:rotate(45deg);border-end-end-radius:2px;
}
.qb-share--pop.is-open .qb-share__tray{opacity:1;visibility:visible;transform:none;}
.qb-share__tray .qb-share__btn{opacity:0;transform:translateY(6px);}
.qb-share--pop.is-open .qb-share__tray .qb-share__btn{opacity:1;transform:none;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1),color .3s ease,background-color .3s ease,border-color .3s ease,box-shadow .3s ease;}
.qb-share--pop.is-open .qb-share__list .qb-share__btn:nth-child(1){transition-delay:.03s;}
.qb-share--pop.is-open .qb-share__list .qb-share__btn:nth-child(2){transition-delay:.07s;}
.qb-share--pop.is-open .qb-share__list .qb-share__btn:nth-child(3){transition-delay:.11s;}
.qb-share--pop.is-open .qb-share__list .qb-share__btn:nth-child(4){transition-delay:.15s;}
.qb-share--pop.is-open .qb-share__list .qb-share__btn:nth-child(5){transition-delay:.19s;}
.qb-share--pop.is-open .qb-share__list .qb-share__btn:nth-child(6){transition-delay:.23s;}
.qb-share--pop.is-open .qb-share__list .qb-share__btn:nth-child(7){transition-delay:.27s;}
.qb-share__tray .qb-share__toast{align-self:center;}
.qb-share__tray .qb-share__toast:empty{display:none;}

/* quiet on a project card until you look at it */
.qb-fp__media .qb-share--pop{
	position:absolute;inset-inline-end:12px;bottom:12px;z-index:4;
	opacity:0;transform:translateY(6px);
	transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.2,1);
}
.qb-fp__item:hover .qb-share--pop,
.qb-fp__item:focus-within .qb-share--pop,
.qb-share--pop.is-open{opacity:1;transform:none;}
@media (hover:none){
	.qb-fp__media .qb-share--pop{opacity:1;transform:none;}
}

@media(max-width:640px){
	.qb-share--row{gap:8px 10px;}
	.qb-share__label{width:100%;}
	.qb-share__btn--pill{height:42px;padding:0 15px;font-size:13.5px;}
	.qb-share__linkbox{flex-wrap:wrap;padding:12px;}
	.qb-share__link{flex-basis:100%;}
	.qb-share__copybtn{width:100%;}
}
@media (prefers-reduced-motion: reduce){
	.qb-share__btn,.qb-share__toggle,.qb-share__tray,.qb-share__toast,.qb-share__copybtn,.qb-share--pop{transition:none!important;transform:none!important;}
	.qb-share--pop.is-open .qb-share__tray .qb-share__btn{transition:none!important;transition-delay:0s!important;}
}