/**
 * SocialDock Frontend Stylesheet
 *
 * Theme-proof, accessible, 0-CLS CSS for social profile follow links and floating bars.
 *
 * @package SocialDock
 */

/* ==========================================================================
   1. Root Variables & Theme Resets
   ========================================================================== */

:root {
	--sdk-size: 48px;
	--sdk-icon-size: 24px;
	--sdk-gap: 8px;
	--sdk-zindex: 99999;
}

/* Base icon anchor reset: isolate from aggressive theme styling */
.sdk-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--sdk-size, 48px) !important;
	height: var(--sdk-size, 48px) !important;
	min-width: var(--sdk-size, 48px) !important;
	min-height: var(--sdk-size, 48px) !important;
	max-width: var(--sdk-size, 48px) !important;
	max-height: var(--sdk-size, 48px) !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 solid transparent !important;
	outline: none;
	text-decoration: none !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	cursor: pointer;
	background-color: var(--sdk-force-bg, var(--sdk-bg, #111214));
	color: var(--sdk-force-fg, var(--sdk-fg, #ffffff)) !important;
	border-radius: var(--sdk-radius, 0px);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	vertical-align: middle;
	position: relative;
	overflow: hidden;
}

/* SVG glyph styling */
.sdk-icon svg.sdk-icon-svg {
	width: var(--sdk-icon-size, 24px) !important;
	height: var(--sdk-icon-size, 24px) !important;
	max-width: var(--sdk-icon-size, 24px) !important;
	max-height: var(--sdk-icon-size, 24px) !important;
	display: block !important;
	fill: currentColor !important;
	pointer-events: none;
	margin: 0 auto !important;
	transform-origin: center center;
}

/* Custom image icon */
.sdk-icon img.sdk-custom-icon-img {
	width: var(--sdk-icon-size, 24px) !important;
	height: var(--sdk-icon-size, 24px) !important;
	max-width: var(--sdk-icon-size, 24px) !important;
	max-height: var(--sdk-icon-size, 24px) !important;
	object-fit: contain;
	display: block !important;
	pointer-events: none;
}

/* Recoloured custom image: the image is a mask filled with the icon colour,
   so hover colours and colour styles apply exactly as on built-in glyphs. */
.sdk-icon .sdk-custom-icon-mask {
	display: block !important;
	width: var(--sdk-icon-size, 24px) !important;
	height: var(--sdk-icon-size, 24px) !important;
	background-color: currentColor !important;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
	margin: 0 auto !important;
}

/* Keyboard accessibility (WCAG 2.2 AA) */
.sdk-icon:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px !important;
	z-index: 2;
}

/* ==========================================================================
   2. Container & Layout Wrappers
   ========================================================================== */

.sdk-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--sdk-gap, 8px);
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

/* Drop shadow */
.sdk-wrap.sdk-shadow .sdk-icon {
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
}

/* ==========================================================================
   3. Shapes
   ========================================================================== */

/* Square (Free) */
.sdk-shape-square .sdk-icon {
	border-radius: var(--sdk-radius, 0px);
}

/* Round (Free) */
.sdk-shape-round .sdk-icon {
	border-radius: 50% !important;
}

/* Rounded (Pro) */
.sdk-shape-rounded .sdk-icon {
	border-radius: var(--sdk-radius, 8px);
}

/* Outline (Pro) */
.sdk-shape-outline .sdk-icon {
	background-color: transparent !important;
	border: 2px solid var(--sdk-force-bg, var(--sdk-bg, currentColor)) !important;
	color: var(--sdk-force-bg, var(--sdk-bg, currentColor)) !important;
}

/* Hover colours apply only where a pointer can really hover (mouse, trackpad).
   On touch screens a tap would otherwise leave the icon stuck in its hover look. */
@media (hover: hover) {
	.sdk-shape-outline .sdk-icon:hover {
		background-color: var(--sdk-force-hbg, var(--sdk-hbg, var(--sdk-force-bg, var(--sdk-bg, currentColor)))) !important;
		color: var(--sdk-force-hfg, var(--sdk-hfg, var(--sdk-force-fg, var(--sdk-fg, #ffffff)))) !important;
	}
}

/* ==========================================================================
   4. Color Styles
   ========================================================================== */

/* Custom color preset */
.sdk-color-custom .sdk-icon {
	background-color: var(--sdk-force-bg, #111214);
	color: var(--sdk-force-fg, #ffffff) !important;
}

/* Mono-dark preset (Pro) */
.sdk-color-mono-dark {
	--sdk-force-bg: #111214;
	--sdk-force-fg: #ffffff;
}
@media (hover: hover) {
	.sdk-color-mono-dark .sdk-icon:hover {
		--sdk-force-bg: #2d3748;
	}
}

/* Mono-light preset (Pro) */
.sdk-color-mono-light {
	--sdk-force-bg: #f3f4f6;
	--sdk-force-fg: #111214;
}
@media (hover: hover) {
	.sdk-color-mono-light .sdk-icon:hover {
		--sdk-force-bg: #e5e7eb;
	}
}

/* Individual link hover overrides */
@media (hover: hover) {
	.sdk-icon:hover {
		background-color: var(--sdk-force-hbg, var(--sdk-hbg, var(--sdk-force-bg, var(--sdk-bg, #111214))));
		color: var(--sdk-force-hfg, var(--sdk-hfg, var(--sdk-force-fg, var(--sdk-fg, #ffffff)))) !important;
	}
}

/* ==========================================================================
   5. Floating Follow Bar (#sdk-floating-bar)
   ========================================================================== */

#sdk-floating-bar,
.sdk-floating {
	position: fixed;
	z-index: var(--sdk-zindex, 99999);
	display: flex;
	box-sizing: border-box;
	pointer-events: auto;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Container box (Floating tab > Container). Unset vars keep the bar transparent and flush. */
#sdk-floating-bar {
	background: var(--sdk-bar-bg, transparent);
	padding: var(--sdk-bar-padding, 0);
	margin: var(--sdk-bar-margin, 0);
	border-radius: var(--sdk-bar-radius, 0);
}

/* Positions */
#sdk-floating-bar.sdk-pos-left {
	left: 0;
	right: auto;
	flex-direction: column;
}

#sdk-floating-bar.sdk-pos-right {
	right: 0;
	left: auto;
	flex-direction: column;
}

#sdk-floating-bar.sdk-pos-bottom {
	bottom: 0 !important;
	left: 50% !important;
	right: auto !important;
	top: auto !important;
	transform: translateX(-50%) !important;
	flex-direction: row;
}

#sdk-floating-bar.sdk-pos-bottom .sdk-wrap {
	flex-direction: row;
}

/* Vertical Alignments (Left & Right) */
#sdk-floating-bar.sdk-pos-left.sdk-valign-middle,
#sdk-floating-bar.sdk-pos-right.sdk-valign-middle {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

#sdk-floating-bar.sdk-pos-left.sdk-valign-top,
#sdk-floating-bar.sdk-pos-right.sdk-valign-top {
	top: 20px;
	bottom: auto;
	transform: none;
}

#sdk-floating-bar.sdk-pos-left.sdk-valign-bottom,
#sdk-floating-bar.sdk-pos-right.sdk-valign-bottom {
	bottom: 20px;
	top: auto;
	transform: none;
}

#sdk-floating-bar.sdk-pos-left.sdk-valign-custom,
#sdk-floating-bar.sdk-pos-right.sdk-valign-custom {
	top: var(--sdk-valign-offset, 25%);
	bottom: auto;
	transform: translateY(-50%);
}

/* RTL Layout docking */
[dir="rtl"] #sdk-floating-bar.sdk-pos-left {
	left: auto;
	right: 0;
}
[dir="rtl"] #sdk-floating-bar.sdk-pos-right {
	right: auto;
	left: 0;
}

/* Pro Scroll: Appear after scroll threshold */
#sdk-floating-bar.sdk-appear-scroll {
	opacity: 0;
	pointer-events: none;
}

#sdk-floating-bar.sdk-appear-scroll.sdk-appeared {
	opacity: 1;
	pointer-events: auto;
}

/* Pro: hide when scrolling stops (fades out; returns on scroll). Listed with the
   appeared state so it wins over it. */
#sdk-floating-bar.sdk-idle-hidden,
#sdk-floating-bar.sdk-appear-scroll.sdk-appeared.sdk-idle-hidden {
	opacity: 0;
	pointer-events: none;
}

/* Pro Scroll: Hide on scroll down */
#sdk-floating-bar.sdk-pos-left.sdk-valign-middle.sdk-scroll-hidden,
#sdk-floating-bar.sdk-pos-left.sdk-valign-custom.sdk-scroll-hidden {
	transform: translateY(-50%) translateX(-120%);
	opacity: 0;
	pointer-events: none;
}

#sdk-floating-bar.sdk-pos-left.sdk-valign-top.sdk-scroll-hidden,
#sdk-floating-bar.sdk-pos-left.sdk-valign-bottom.sdk-scroll-hidden {
	transform: translateX(-120%);
	opacity: 0;
	pointer-events: none;
}

#sdk-floating-bar.sdk-pos-right.sdk-valign-middle.sdk-scroll-hidden,
#sdk-floating-bar.sdk-pos-right.sdk-valign-custom.sdk-scroll-hidden {
	transform: translateY(-50%) translateX(120%);
	opacity: 0;
	pointer-events: none;
}

#sdk-floating-bar.sdk-pos-right.sdk-valign-top.sdk-scroll-hidden,
#sdk-floating-bar.sdk-pos-right.sdk-valign-bottom.sdk-scroll-hidden {
	transform: translateX(120%);
	opacity: 0;
	pointer-events: none;
}

#sdk-floating-bar.sdk-pos-bottom.sdk-scroll-hidden {
	transform: translateX(-50%) translateY(120%) !important;
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   6. Mobile Styles & Breakpoint (768px)
   ========================================================================== */

@media (max-width: 768px) {
	.sdk-hide-mobile {
		display: none !important;
	}

	/* Sticky bottom mobile sheet (Pro) */
	#sdk-floating-bar.sdk-sticky-mobile {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		transform: none !important;
		flex-direction: row !important;
		justify-content: center !important;
		background: var(--sdk-bar-bg, #ffffff);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
		padding: var(--sdk-bar-padding, 8px 12px);
		margin: 0 !important;
		border-radius: 0;
	}

	#sdk-floating-bar.sdk-sticky-mobile .sdk-wrap {
		flex-direction: row !important;
		justify-content: center !important;
		width: 100%;
	}
}

@media (min-width: 769px) {
	.sdk-hide-desktop {
		display: none !important;
	}
}

/* ==========================================================================
   7. Hover Animations (Respects prefers-reduced-motion)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	/* None */
	.sdk-hover-none .sdk-icon:hover {
		opacity: 0.9;
	}

	/* Rotate (Free) */
	.sdk-hover-rotate .sdk-icon:hover {
		transform: rotate(360deg);
	}

	/* Lift (Pro) */
	.sdk-hover-lift .sdk-icon:hover {
		transform: translateY(-4px);
	}
	.sdk-wrap.sdk-shadow.sdk-hover-lift .sdk-icon:hover {
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
	}

	/* Pulse (Pro) */
	@keyframes sdk-pulse {
		0% { transform: scale(1); }
		50% { transform: scale(1.12); }
		100% { transform: scale(1); }
	}
	.sdk-hover-pulse .sdk-icon:hover {
		animation: sdk-pulse 0.6s infinite ease-in-out;
	}

	/* Shake (Pro) */
	@keyframes sdk-shake {
		0%, 100% { transform: translateX(0); }
		20%, 60% { transform: translateX(-4px); }
		40%, 80% { transform: translateX(4px); }
	}
	.sdk-hover-shake .sdk-icon:hover {
		animation: sdk-shake 0.4s ease;
	}

	/* Bounce (Pro) */
	@keyframes sdk-bounce {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-8px); }
	}
	.sdk-hover-bounce .sdk-icon:hover {
		animation: sdk-bounce 0.5s ease;
	}

	/* Swing (Pro) */
	@keyframes sdk-swing {
		20% { transform: rotate(15deg); }
		40% { transform: rotate(-10deg); }
		60% { transform: rotate(5deg); }
		80% { transform: rotate(-5deg); }
		100% { transform: rotate(0deg); }
	}
	.sdk-hover-swing .sdk-icon:hover {
		animation: sdk-swing 0.6s ease;
		transform-origin: top center;
	}

	/* Flip (Pro) */
	.sdk-hover-flip .sdk-icon:hover {
		transform: perspective(400px) rotateY(180deg);
	}
}

/* Reduced motion guarantee (WCAG 2.2 AA) */
@media (prefers-reduced-motion: reduce) {
	.sdk-floating,
	.sdk-wrap,
	.sdk-icon,
	.sdk-icon svg {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}


/* ==========================================================================
   Share Buttons (SPEC §5.4)
   ========================================================================== */

/* <button> share actions (copy link, print, device share) share the icon reset. */
button.sdk-icon {
	-webkit-appearance: none !important;
	appearance: none !important;
	font: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	box-shadow: none;
}

.sdk-icon[hidden] {
	display: none !important;
}

.sdk-share {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 1em 0;
	padding: 0;
	list-style: none;
}
.sdk-share.sdk-align-center { justify-content: center; }
.sdk-share.sdk-align-right  { justify-content: flex-end; }

.sdk-share .sdk-share-icon svg.sdk-icon-svg {
	width: var(--sdk-icon-size, 17px) !important;
	height: var(--sdk-icon-size, 17px) !important;
	max-width: var(--sdk-icon-size, 17px) !important;
	max-height: var(--sdk-icon-size, 17px) !important;
	flex-shrink: 0;
}

.sdk-share-label {
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

/* Pill: icon + label */
.sdk-share.sdk-style-icon-label .sdk-share-icon {
	width: auto !important;
	max-width: none !important;
	padding: 0 14px !important;
	gap: 8px;
}
.sdk-share.sdk-style-icon-label.sdk-shape-round .sdk-share-icon { border-radius: 999px !important; }

/* Button: full-colour bar with a darker icon segment */
.sdk-share.sdk-style-button .sdk-share-icon {
	width: auto !important;
	max-width: none !important;
	min-width: 140px !important;
	justify-content: flex-start !important;
	padding: 0 14px 0 0 !important;
	gap: 10px;
}
.sdk-share.sdk-style-button .sdk-share-icon svg.sdk-icon-svg {
	box-sizing: content-box !important;
	padding: calc((var(--sdk-size, 34px) - var(--sdk-icon-size, 17px)) / 2) !important;
	background: rgba(0, 0, 0, 0.15);
	max-width: none !important;
	max-height: none !important;
}
.sdk-share.sdk-style-button.sdk-shape-round .sdk-share-icon { border-radius: 999px !important; }

/* Copied confirmation */
.sdk-copy-link.sdk-copied::after {
	content: "\2713";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: inherit;
	font-size: calc(var(--sdk-icon-size, 17px) * 1.1);
}

.sdk-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Floating share sidebar (Pro, desktop) — docks opposite the floating follow bar. */
#sdk-share-sidebar {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: calc(var(--sdk-zindex, 99999) - 1);
}
#sdk-share-sidebar.sdk-share-side-right { right: 0; }
#sdk-share-sidebar.sdk-share-side-left  { left: 0; }
#sdk-share-sidebar .sdk-share {
	flex-direction: column;
	margin: 0;
	gap: 0;
}

/* Sticky mobile share bar (Pro) */
#sdk-share-mobile-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: calc(var(--sdk-zindex, 99999) - 1);
	background: #ffffff;
	box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.12);
	padding: 6px 8px;
	padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}
#sdk-share-mobile-bar .sdk-share {
	margin: 0;
	flex-wrap: nowrap;
	justify-content: space-around;
}
#sdk-share-mobile-bar .sdk-share-icon {
	flex: 1 1 0;
	width: auto !important;
	max-width: none !important;
}

@media (max-width: 768px) {
	/* Lift a sticky floating follow bar above the mobile share bar when both show. */
	#sdk-share-mobile-bar ~ #sdk-floating-bar.sdk-sticky-mobile {
		bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

[dir="rtl"] #sdk-share-sidebar.sdk-share-side-right { right: auto; left: 0; }
[dir="rtl"] #sdk-share-sidebar.sdk-share-side-left  { left: auto; right: 0; }

/* ==========================================================================
   Inline placements: shortcodes, widget, block (SPEC §5.5–5.7)
   ========================================================================== */

.sdk-inline {
	display: flex;
	margin: 1em 0;
}
.sdk-inline .sdk-wrap {
	flex-direction: row;
	flex-wrap: wrap;
}
.sdk-inline.sdk-align-center { justify-content: center; }
.sdk-inline.sdk-align-right  { justify-content: flex-end; }

.sdk-block .sdk-inline,
.sdk-block .sdk-share { margin: 0; }

.sdk-block-empty {
	padding: 12px 16px;
	border: 1px dashed #c3c4c7;
	color: #50575e;
	font-size: 13px;
}

/* ==========================================================================
   Chat bubble (Pro, SPEC §5.3)
   ========================================================================== */

.sdk-chat-bubble {
	position: fixed;
	bottom: 22px;
	z-index: calc(var(--sdk-zindex, 99999) + 1);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--sdk-bg, #25D366);
	color: #ffffff !important;
	text-decoration: none !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
	transition: transform 0.18s ease;
}
.sdk-chat-bubble.sdk-chat-side-right { right: 22px; }
.sdk-chat-bubble.sdk-chat-side-left  { left: 22px; }
.sdk-chat-bubble svg { width: 28px !important; height: 28px !important; fill: currentColor !important; }
.sdk-chat-bubble:focus-visible { outline: 3px solid #1d2327; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.sdk-chat-bubble:hover { transform: scale(1.08); }
}
@media (max-width: 768px) {
	#sdk-share-mobile-bar ~ .sdk-chat-bubble { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}
[dir="rtl"] .sdk-chat-bubble.sdk-chat-side-right { right: auto; left: 22px; }
[dir="rtl"] .sdk-chat-bubble.sdk-chat-side-left  { left: auto; right: 22px; }

/* ==========================================================================
   Action-button reveal mode (Pro, SPEC §5.2)
   ========================================================================== */

.sdk-reveal-btn {
	-webkit-appearance: none;
	appearance: none;
	width: var(--sdk-size, 48px);
	height: var(--sdk-size, 48px);
	margin: var(--sdk-action-margin, 0);
	padding: 0;
	border-radius: 50%;
	border: 2px solid var(--sdk-action-border, transparent);
	background: var(--sdk-action-bg, #111214);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}
.sdk-reveal-btn svg { width: 45%; height: 45%; transition: transform 0.2s ease; }
.sdk-reveal-btn[aria-expanded="true"] { border-color: var(--sdk-action-border-active, var(--sdk-action-border, transparent)); }
.sdk-reveal-btn[aria-expanded="true"].sdk-reveal-icon-plus svg { transform: rotate(45deg); }
.sdk-reveal-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sdk-rv-shadow { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }

#sdk-floating-bar.sdk-has-reveal { display: flex; flex-direction: column; align-items: center; gap: var(--sdk-gap, 8px); }
#sdk-floating-bar.sdk-has-reveal.sdk-pos-bottom { flex-direction: row; }

.sdk-reveal-items {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0.2s;
}
.sdk-reveal-items.is-open { max-height: 1200px; opacity: 1; visibility: visible; }
.sdk-pos-bottom .sdk-reveal-items { max-height: none; max-width: 0; }
.sdk-pos-bottom .sdk-reveal-items.is-open { max-width: 2000px; }

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.sdk-rv-animate-hover .sdk-icon:hover { transform: translateY(-3px) scale(1.08); }
}

/* Reveal on mobile only: on desktop the icons show directly and the button hides. */
@media (min-width: 769px) {
	.sdk-reveal-mobile .sdk-reveal-btn { display: none; }
	.sdk-reveal-mobile .sdk-reveal-items { max-height: none; max-width: none; opacity: 1; visibility: visible; overflow: visible; }
}