/* ==========================================================================
   IISAUH THEME2026 — Modern Floating Social Media Widget
   (Laptops, Desktops & Large Displays Only >= 1025px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Master Widget Container (Hidden on Mobile & Tablets)
   -------------------------------------------------------------------------- */
.iisauh-floating-social {
	display: none;
}

@media (min-width: 1025px) {
	.iisauh-floating-social {
		display: block;
		position: fixed;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 99990;
		font-family: var(--font, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
		-webkit-tap-highlight-color: transparent;
		user-select: none;
	}

	.iisauh-floating-social__stack {
		display: flex;
		flex-direction: column;
		gap: 8px;
		align-items: flex-end;
	}

	/* --------------------------------------------------------------------------
	   2. Individual Floating Item & Creative Pill Capsule
	   -------------------------------------------------------------------------- */
	.iisauh-floating-social__item {
		position: relative;
		display: flex;
		justify-content: flex-end;
	}

	.iisauh-floating-social__link {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 44px;
		height: 42px;
		border-radius: 21px 0 0 21px;
		padding-left: 6px;
		padding-right: 5px;
		color: #ffffff;
		text-decoration: none;
		overflow: hidden;
		cursor: pointer;
		position: relative;
		isolation: isolate;
		border: 1px solid rgba(255, 255, 255, 0.32);
		border-right: none;
		box-shadow:
			0 6px 18px rgba(15, 42, 74, 0.18),
			inset 0 1px 0 rgba(255, 255, 255, 0.5);
		transition:
			width 0.34s cubic-bezier(0.16, 1, 0.3, 1),
			transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
			box-shadow 0.26s ease,
			background 0.3s ease;
	}

	/* Creative Shimmer Sweep across capsule */
	.iisauh-floating-social__link::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
		transition: left 0.5s ease;
		pointer-events: none;
		z-index: 1;
	}

	.iisauh-floating-social__item:hover .iisauh-floating-social__link::before,
	.iisauh-floating-social__item.is-expanded .iisauh-floating-social__link::before {
		left: 100%;
	}

	/* Expanding Hover & Active / Locked States */
	.iisauh-floating-social__item:hover .iisauh-floating-social__link,
	.iisauh-floating-social__item.is-expanded .iisauh-floating-social__link {
		width: 126px;
		transform: translateX(-4px);
		box-shadow:
			0 10px 26px rgba(15, 42, 74, 0.26),
			inset 0 1px 0 rgba(255, 255, 255, 0.65);
	}

	.iisauh-floating-social__link:focus-visible {
		outline: 2px solid var(--teal, #00a896);
		outline-offset: 2px;
		width: 126px;
		transform: translateX(-4px);
	}

	/* --------------------------------------------------------------------------
	   3. "Follow Us" Text Label (Precedes the icon)
	   -------------------------------------------------------------------------- */
	.iisauh-floating-social__label {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding-left: 10px;
		padding-right: 4px;
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		transform: translateX(10px);
		transition:
			opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
			transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
			visibility 0.25s ease;
	}

	.iisauh-floating-social__item:hover .iisauh-floating-social__label,
	.iisauh-floating-social__item.is-expanded .iisauh-floating-social__label,
	.iisauh-floating-social__link:focus-visible .iisauh-floating-social__label {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
	}

	.iisauh-floating-social__text {
		font-size: 9.5px;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: #ffffff;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
		line-height: 1;
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.iisauh-floating-social__text::after {
		content: '→';
		font-size: 10px;
		opacity: 0.85;
		transition: transform 0.2s ease;
	}

	.iisauh-floating-social__item:hover .iisauh-floating-social__text::after,
	.iisauh-floating-social__item.is-expanded .iisauh-floating-social__text::after {
		transform: translateX(2px);
	}

	/* --------------------------------------------------------------------------
	   4. Brand Icon Container: Creative Compact Circular Glass Lens
	   -------------------------------------------------------------------------- */
	.iisauh-floating-social__icon {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		color: #ffffff;
		background: rgba(255, 255, 255, 0.22);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		border: 1px solid rgba(255, 255, 255, 0.4);
		box-shadow:
			0 2px 6px rgba(0, 0, 0, 0.14),
			inset 0 1px 1px rgba(255, 255, 255, 0.5);
		position: relative;
		z-index: 2;
		transition:
			transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
			background 0.25s ease,
			box-shadow 0.25s ease;
	}

	.iisauh-floating-social__icon svg {
		display: block;
		width: 16px;
		height: 16px;
		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
		transition: transform 0.25s ease;
	}

	.iisauh-floating-social__item:hover .iisauh-floating-social__icon,
	.iisauh-floating-social__item.is-expanded .iisauh-floating-social__icon {
		background: rgba(255, 255, 255, 0.3);
		box-shadow:
			0 4px 12px rgba(0, 0, 0, 0.18),
			inset 0 1px 1px rgba(255, 255, 255, 0.6);
	}

	.iisauh-floating-social__item--facebook:hover .iisauh-floating-social__icon,
	.iisauh-floating-social__item--facebook.is-expanded .iisauh-floating-social__icon {
		transform: translateY(-1px) scale(1.08);
	}

	.iisauh-floating-social__item--instagram:hover .iisauh-floating-social__icon,
	.iisauh-floating-social__item--instagram.is-expanded .iisauh-floating-social__icon {
		transform: rotate(7deg) scale(1.08);
	}

	/* --------------------------------------------------------------------------
	   5. Network-Specific Creative Gradients & Ambient Glow
	   -------------------------------------------------------------------------- */
	/* Facebook */
	.iisauh-floating-social__item--facebook .iisauh-floating-social__link {
		background: linear-gradient(135deg, #1877f2 0%, #0d5ec4 60%, #08499c 100%);
	}
	.iisauh-floating-social__item--facebook:hover .iisauh-floating-social__link,
	.iisauh-floating-social__item--facebook.is-expanded .iisauh-floating-social__link {
		box-shadow:
			0 10px 26px rgba(24, 119, 242, 0.46),
			inset 0 1px 0 rgba(255, 255, 255, 0.65);
	}

	/* Instagram */
	.iisauh-floating-social__item--instagram .iisauh-floating-social__link {
		background: linear-gradient(135deg, #833ab4 0%, #c13584 35%, #e1306c 60%, #fd1d1d 80%, #f77737 100%);
	}
	.iisauh-floating-social__item--instagram:hover .iisauh-floating-social__link,
	.iisauh-floating-social__item--instagram.is-expanded .iisauh-floating-social__link {
		box-shadow:
			0 10px 26px rgba(225, 48, 108, 0.46),
			inset 0 1px 0 rgba(255, 255, 255, 0.65);
	}

	/* YouTube */
	.iisauh-floating-social__item--youtube .iisauh-floating-social__link {
		background: linear-gradient(135deg, #ff0033 0%, #cc0029 100%);
	}
	.iisauh-floating-social__item--youtube:hover .iisauh-floating-social__link,
	.iisauh-floating-social__item--youtube.is-expanded .iisauh-floating-social__link {
		box-shadow:
			0 12px 28px rgba(255, 0, 51, 0.42),
			inset 0 1px 0 rgba(255, 255, 255, 0.6);
	}

	/* LinkedIn */
	.iisauh-floating-social__item--linkedin .iisauh-floating-social__link {
		background: linear-gradient(135deg, #0a66c2 0%, #004d94 100%);
	}
	.iisauh-floating-social__item--linkedin:hover .iisauh-floating-social__link,
	.iisauh-floating-social__item--linkedin.is-expanded .iisauh-floating-social__link {
		box-shadow:
			0 12px 28px rgba(10, 102, 194, 0.42),
			inset 0 1px 0 rgba(255, 255, 255, 0.6);
	}

	/* Twitter / X */
	.iisauh-floating-social__item--twitter .iisauh-floating-social__link {
		background: linear-gradient(135deg, #1e293b 0%, #090d16 100%);
	}
	.iisauh-floating-social__item--twitter:hover .iisauh-floating-social__link,
	.iisauh-floating-social__item--twitter.is-expanded .iisauh-floating-social__link {
		box-shadow:
			0 12px 28px rgba(15, 23, 42, 0.5),
			inset 0 1px 0 rgba(255, 255, 255, 0.6);
	}

	/* --------------------------------------------------------------------------
	   6. Optional Variant: Frosted Pearl Glass Mode (.iisauh-floating-social--pearl)
	   -------------------------------------------------------------------------- */
	.iisauh-floating-social--pearl .iisauh-floating-social__link {
		background: rgba(255, 255, 255, 0.94);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-color: rgba(255, 255, 255, 0.8);
		box-shadow:
			0 8px 24px rgba(15, 42, 74, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.9);
	}
	.iisauh-floating-social--pearl .iisauh-floating-social__text {
		color: #0f2a4a;
		text-shadow: none;
	}
	.iisauh-floating-social--pearl .iisauh-floating-social__item--facebook .iisauh-floating-social__icon {
		background: rgba(24, 119, 242, 0.1);
		color: #1877f2;
		border-color: rgba(24, 119, 242, 0.25);
	}
	.iisauh-floating-social--pearl .iisauh-floating-social__item--instagram .iisauh-floating-social__icon {
		background: rgba(253, 29, 29, 0.1);
		color: #fd1d1d;
		border-color: rgba(253, 29, 29, 0.25);
	}
	.iisauh-floating-social--pearl .iisauh-floating-social__item--youtube .iisauh-floating-social__icon {
		background: rgba(255, 0, 51, 0.1);
		color: #ff0033;
		border-color: rgba(255, 0, 51, 0.25);
	}
	.iisauh-floating-social--pearl .iisauh-floating-social__item--linkedin .iisauh-floating-social__icon {
		background: rgba(10, 102, 194, 0.1);
		color: #0a66c2;
		border-color: rgba(10, 102, 194, 0.25);
	}
	.iisauh-floating-social--pearl .iisauh-floating-social__item--twitter .iisauh-floating-social__icon {
		background: rgba(15, 23, 42, 0.1);
		color: #0f172a;
		border-color: rgba(15, 23, 42, 0.25);
	}

	.iisauh-floating-social--pearl .iisauh-floating-social__item--facebook:hover .iisauh-floating-social__link,
	.iisauh-floating-social--pearl .iisauh-floating-social__item--facebook.is-expanded .iisauh-floating-social__link {
		background: linear-gradient(135deg, #1877f2 0%, #0d5ec4 100%);
	}
	.iisauh-floating-social--pearl .iisauh-floating-social__item--instagram:hover .iisauh-floating-social__link,
	.iisauh-floating-social--pearl .iisauh-floating-social__item--instagram.is-expanded .iisauh-floating-social__link {
		background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 55%, #fcb045 100%);
	}
	.iisauh-floating-social--pearl .iisauh-floating-social__item--youtube:hover .iisauh-floating-social__link,
	.iisauh-floating-social--pearl .iisauh-floating-social__item--youtube.is-expanded .iisauh-floating-social__link {
		background: linear-gradient(135deg, #ff0033 0%, #cc0029 100%);
	}
	.iisauh-floating-social--pearl .iisauh-floating-social__item--linkedin:hover .iisauh-floating-social__link,
	.iisauh-floating-social--pearl .iisauh-floating-social__item--linkedin.is-expanded .iisauh-floating-social__link {
		background: linear-gradient(135deg, #0a66c2 0%, #004d94 100%);
	}
	.iisauh-floating-social--pearl .iisauh-floating-social__item--twitter:hover .iisauh-floating-social__link,
	.iisauh-floating-social--pearl .iisauh-floating-social__item--twitter.is-expanded .iisauh-floating-social__link {
		background: linear-gradient(135deg, #1e293b 0%, #090d16 100%);
	}
	.iisauh-floating-social--pearl .iisauh-floating-social__item:hover .iisauh-floating-social__text,
	.iisauh-floating-social--pearl .iisauh-floating-social__item.is-expanded .iisauh-floating-social__text,
	.iisauh-floating-social--pearl .iisauh-floating-social__item:hover .iisauh-floating-social__icon,
	.iisauh-floating-social--pearl .iisauh-floating-social__item.is-expanded .iisauh-floating-social__icon {
		color: #ffffff;
		background: rgba(255, 255, 255, 0.22);
		border-color: rgba(255, 255, 255, 0.35);
	}
}

/* --------------------------------------------------------------------------
   6. Motion Sensitivity (Accessibility)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.iisauh-floating-social__link,
	.iisauh-floating-social__label,
	.iisauh-floating-social__icon {
		transition: none !important;
	}
}