/**
 * FollowDock Pro styles (not included in the free version).
 * Loaded after frontend.css, only when Pro is active.
 *
 * @package FollowDock
 */

/* Custom icons */
/* Custom image icon */
.fdk-icon img.fdk-custom-icon-img {
	width: var(--fdk-icon-size, 24px) !important;
	height: var(--fdk-icon-size, 24px) !important;
	max-width: var(--fdk-icon-size, 24px) !important;
	max-height: var(--fdk-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. */
.fdk-icon .fdk-custom-icon-mask {
	display: block !important;
	width: var(--fdk-icon-size, 24px) !important;
	height: var(--fdk-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;
}

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

/* Outline (Pro) */
.fdk-shape-outline .fdk-icon {
	background-color: transparent !important;
	border: 2px solid var(--fdk-force-bg, var(--fdk-bg, currentColor)) !important;
	color: var(--fdk-force-bg, var(--fdk-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) {
	.fdk-shape-outline .fdk-icon:hover {
		background-color: var(--fdk-force-hbg, var(--fdk-hbg, var(--fdk-force-bg, var(--fdk-bg, currentColor)))) !important;
		color: var(--fdk-force-hfg, var(--fdk-hfg, var(--fdk-force-fg, var(--fdk-fg, #ffffff)))) !important;
	}
}

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

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

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

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

/* Floating bar: top, bottom and custom vertical positions */
#fdk-floating-bar.fdk-pos-left.fdk-valign-top,
#fdk-floating-bar.fdk-pos-right.fdk-valign-top {
	top: 20px;
	bottom: auto;
	transform: none;
}

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

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

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

#fdk-floating-bar.fdk-appear-scroll.fdk-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. */
#fdk-floating-bar.fdk-idle-hidden,
#fdk-floating-bar.fdk-appear-scroll.fdk-appeared.fdk-idle-hidden {
	opacity: 0;
	pointer-events: none;
}

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

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

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

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

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

@media (max-width: 768px) {
	/* Sticky bottom mobile sheet (Pro) */
	#fdk-floating-bar.fdk-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(--fdk-bar-bg, #ffffff);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
		padding: var(--fdk-bar-padding, 8px 12px);
		margin: 0 !important;
		border-radius: 0;
	}

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

/* Hover effects (respect prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	/* Lift (Pro) */
	.fdk-hover-lift .fdk-icon:hover {
		transform: translateY(-4px);
	}
	.fdk-wrap.fdk-shadow.fdk-hover-lift .fdk-icon:hover {
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
	}

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

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

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

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

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

/* Share button styles: icon + label and button */
.fdk-share-label {
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

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

/* Button: full-colour bar with a darker icon segment */
.fdk-share.fdk-style-button .fdk-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;
}
.fdk-share.fdk-style-button .fdk-share-icon svg.fdk-icon-svg {
	box-sizing: content-box !important;
	padding: calc((var(--fdk-size, 34px) - var(--fdk-icon-size, 17px)) / 2) !important;
	background: rgba(0, 0, 0, 0.15);
	max-width: none !important;
	max-height: none !important;
}
.fdk-share.fdk-style-button.fdk-shape-round .fdk-share-icon { border-radius: 999px !important; }

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

/* Sticky mobile share bar (Pro) */
#fdk-share-mobile-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: calc(var(--fdk-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));
}
#fdk-share-mobile-bar .fdk-share {
	margin: 0;
	flex-wrap: nowrap;
	justify-content: space-around;
}
#fdk-share-mobile-bar .fdk-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. */
	#fdk-share-mobile-bar ~ #fdk-floating-bar.fdk-sticky-mobile {
		bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

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

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

.fdk-chat-bubble {
	position: fixed;
	bottom: 22px;
	z-index: calc(var(--fdk-zindex, 99999) + 1);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--fdk-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;
}
.fdk-chat-bubble.fdk-chat-side-right { right: 22px; }
.fdk-chat-bubble.fdk-chat-side-left  { left: 22px; }
.fdk-chat-bubble svg { width: 28px !important; height: 28px !important; fill: currentColor !important; }
.fdk-chat-bubble:focus-visible { outline: 3px solid #1d2327; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.fdk-chat-bubble:hover { transform: scale(1.08); }
}
@media (max-width: 768px) {
	#fdk-share-mobile-bar ~ .fdk-chat-bubble { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}
[dir="rtl"] .fdk-chat-bubble.fdk-chat-side-right { right: auto; left: 22px; }
[dir="rtl"] .fdk-chat-bubble.fdk-chat-side-left  { left: auto; right: 22px; }

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

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

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

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

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.fdk-rv-animate-hover .fdk-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) {
	.fdk-reveal-mobile .fdk-reveal-btn { display: none; }
	.fdk-reveal-mobile .fdk-reveal-items { max-height: none; max-width: none; opacity: 1; visibility: visible; overflow: visible; }
}