/**
 * Public CSS for Shrikant Article Engagement
 * Brand Primary: #3857E8
 */

:root {
	--shrikant-ae-primary: #5850ec;
	--shrikant-ae-primary-hover: #4f46e5;
	--shrikant-ae-primary-light: #eef2ff;
	--shrikant-ae-primary-ultra-light: #f5f3ff;
	--shrikant-ae-text: #1D2327;
	--shrikant-ae-text-secondary: #646970;
	--shrikant-ae-border: #DCDCDE;
	--shrikant-ae-bg: #FFFFFF;
	--shrikant-ae-bg-soft: #F6F7F9;
	--shrikant-ae-radius-sm: 6px;
	--shrikant-ae-radius-md: 10px;
	--shrikant-ae-radius-lg: 24px;
	--shrikant-ae-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	--shrikant-ae-transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Main Engagement Bar Container
   ========================================================================== */

.shrikant-article-engagement {
	margin: 24px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
}

.shrikant-article-engagement *,
.shrikant-article-engagement *::before,
.shrikant-article-engagement *::after {
	box-sizing: border-box;
}

.shrikant-ae-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 12px;
	width: 100%;
}

/* --- Style 1: Outlined (Clean Single Outer Border) --- */
.shrikant-ae-style-outlined {
	background: var(--shrikant-ae-bg);
	border: 1px solid var(--shrikant-ae-border);
	border-radius: var(--shrikant-ae-radius-md);
	padding: 10px 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.shrikant-ae-style-outlined .shrikant-ae-btn {
	border: none !important;
	border-radius: var(--shrikant-ae-radius-sm);
	padding: 8px 14px;
}

/* --- Style 2: Rounded (Modern Soft Pill Container) --- */
.shrikant-ae-style-rounded {
	background: var(--shrikant-ae-bg-soft);
	border: 1px solid var(--shrikant-ae-border);
	border-radius: 30px;
	padding: 8px 22px;
}

.shrikant-ae-style-rounded .shrikant-ae-btn {
	border: none !important;
	border-radius: 20px;
	padding: 8px 16px;
}

/* --- Style 3: Minimal (Border-Free Clean Layout) --- */
.shrikant-ae-style-minimal {
	background: transparent;
	border: none !important;
	padding: 4px 0;
	justify-content: flex-start;
	gap: 24px;
}

.shrikant-ae-style-minimal .shrikant-ae-btn {
	border: none !important;
	padding: 6px 10px;
	background: transparent;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.shrikant-ae-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: transparent;
	border: none !important;
	color: var(--shrikant-ae-text-secondary);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.2;
	transition: var(--shrikant-ae-transition);
	outline: none;
	min-height: 40px;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	white-space: nowrap;
}

.shrikant-ae-btn:hover {
	color: var(--shrikant-ae-primary);
	background: var(--shrikant-ae-primary-ultra-light);
}

.shrikant-ae-btn:focus-visible {
	outline: 2px solid var(--shrikant-ae-primary);
	outline-offset: 2px;
}

.shrikant-ae-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease;
}

.shrikant-ae-btn:hover .shrikant-ae-icon {
	transform: translateY(-1px);
}

.shrikant-ae-btn-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.shrikant-ae-count {
	font-weight: 700;
}

/* Liked State */
.shrikant-ae-btn--like.is-liked {
	color: var(--shrikant-ae-primary);
	background: var(--shrikant-ae-primary-light);
}

.shrikant-ae-btn--like.is-liked .shrikant-ae-icon {
	color: var(--shrikant-ae-primary);
	transform: scale(1.1);
}

/* Responsive Narrow Screen Button Spacing */
@media (max-width: 480px) {
	.shrikant-ae-bar-inner {
		gap: 6px;
		padding: 6px 8px;
		justify-content: space-between;
	}

	.shrikant-ae-btn {
		padding: 6px 8px;
		font-size: 12px;
		gap: 4px;
		min-height: 36px;
	}

	.shrikant-ae-btn-label {
		gap: 4px;
	}
}

/* ==========================================================================
   Share Modal Dialog (Full Viewport Glassmorphism)
   ========================================================================== */

.shrikant-ae-share-modal[hidden] {
	display: none !important;
}

.shrikant-ae-share-modal {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 999999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	box-sizing: border-box !important;
}

.shrikant-ae-share-modal-backdrop {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(15, 23, 42, 0.65) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	z-index: 1 !important;
}

.shrikant-ae-share-modal-content {
	position: relative !important;
	width: 100% !important;
	max-width: 440px !important;
	background: #FFFFFF !important;
	border-radius: 16px !important;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
	overflow: hidden !important;
	z-index: 2 !important;
	margin: auto !important;
	animation: shrikantAeScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes shrikantAeScaleIn {
	from {
		opacity: 0;
		transform: scale(0.92) translateY(12px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.shrikant-ae-share-modal-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 18px 24px !important;
	border-bottom: 1px solid var(--shrikant-ae-border) !important;
	background: #FFFFFF !important;
}

.shrikant-ae-share-modal-title {
	margin: 0 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--shrikant-ae-text) !important;
}

.shrikant-ae-share-modal-close {
	background: transparent !important;
	border: none !important;
	font-size: 24px !important;
	line-height: 1 !important;
	color: var(--shrikant-ae-text-secondary) !important;
	cursor: pointer !important;
	padding: 4px 8px !important;
	border-radius: 6px !important;
	transition: var(--shrikant-ae-transition) !important;
}

.shrikant-ae-share-modal-close:hover {
	color: var(--shrikant-ae-text) !important;
	background: var(--shrikant-ae-bg-soft) !important;
}

.shrikant-ae-share-modal-body {
	padding: 20px 24px !important;
	background: #FFFFFF !important;
}

.shrikant-ae-share-grid {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 12px !important;
}

.shrikant-ae-share-item {
	margin: 0 !important;
}

.shrikant-ae-share-link {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px 14px !important;
	border: 1px solid var(--shrikant-ae-border) !important;
	border-radius: 10px !important;
	color: var(--shrikant-ae-text) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: var(--shrikant-ae-transition) !important;
	background: #FFFFFF !important;
}

.shrikant-ae-share-link:hover {
	border-color: var(--shrikant-ae-primary) !important;
	background: var(--shrikant-ae-primary-ultra-light) !important;
	color: var(--shrikant-ae-primary) !important;
}

/* Service Brand Icons & Hover Accent */
.shrikant-ae-share-link--whatsapp .shrikant-ae-share-icon { color: #25D366 !important; }
.shrikant-ae-share-link--whatsapp:hover { border-color: #25D366 !important; background: #F0FDF4 !important; color: #166534 !important; }

.shrikant-ae-share-link--facebook .shrikant-ae-share-icon { color: #1877F2 !important; }
.shrikant-ae-share-link--facebook:hover { border-color: #1877F2 !important; background: #EFF6FF !important; color: #1E40AF !important; }

.shrikant-ae-share-link--x .shrikant-ae-share-icon { color: #000000 !important; }
.shrikant-ae-share-link--x:hover { border-color: #000000 !important; background: #F8FAFC !important; color: #0F172A !important; }

.shrikant-ae-share-link--telegram .shrikant-ae-share-icon { color: #229ED9 !important; }
.shrikant-ae-share-link--telegram:hover { border-color: #229ED9 !important; background: #F0F9FF !important; color: #0369A1 !important; }

.shrikant-ae-share-link--copy_link .shrikant-ae-share-icon { color: var(--shrikant-ae-primary) !important; }

.shrikant-ae-share-toast {
	padding: 12px 24px !important;
	background: #10B981 !important;
	color: #FFFFFF !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-align: center !important;
	display: none !important;
}

.shrikant-ae-share-toast.is-visible {
	display: block !important;
}

/* ==========================================================================
   Floating Comment Button
   ========================================================================== */

.shrikant-ae-floating-btn[style*="display: none"],
.shrikant-ae-floating-btn[style*="display:none"] {
	display: none !important;
}

.shrikant-ae-floating-btn {
	position: fixed !important;
	bottom: 24px !important;
	right: 24px !important;
	z-index: 9999 !important;
	display: inline-flex;
	align-items: center !important;
	gap: 8px !important;
	padding: 12px 18px !important;
	background: var(--shrikant-ae-bg) !important;
	color: var(--shrikant-ae-primary) !important;
	border: 1px solid var(--shrikant-ae-border) !important;
	border-radius: 30px !important;
	box-shadow: var(--shrikant-ae-shadow) !important;
	text-decoration: none !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	transition: var(--shrikant-ae-transition) !important;
}

.shrikant-ae-floating-btn:hover {
	background: var(--shrikant-ae-primary) !important;
	color: #FFFFFF !important;
	border-color: var(--shrikant-ae-primary) !important;
	transform: translateY(-2px) !important;
}

/* ==========================================================================
   Mobile Sticky Engagement Bar
   ========================================================================== */

.shrikant-ae-sticky-bar[style*="display: none"],
.shrikant-ae-sticky-bar[style*="display:none"] {
	display: none !important;
}

.shrikant-ae-sticky-bar {
	display: none;
	position: fixed !important;
	z-index: 9998 !important;
	box-sizing: border-box !important;
}

/* Layout 1: Floating Pill Bar (Default) */
.shrikant-ae-sticky-bar.shrikant-ae-sticky-style-floating_pill,
.shrikant-ae-sticky-bar {
	bottom: max(16px, env(safe-area-inset-bottom)) !important;
	left: 16px !important;
	right: 16px !important;
	width: auto !important;
	max-width: 440px !important;
	margin: 0 auto !important;
	background: rgba(255, 255, 255, 0.94) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border: 1px solid rgba(203, 213, 225, 0.8) !important;
	border-radius: 30px !important;
	box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.15), 0 4px 6px -2px rgba(15, 23, 42, 0.05) !important;
	padding: 6px 12px !important;
}

/* Layout 2: Full Width Bottom Bar */
.shrikant-ae-sticky-bar.shrikant-ae-sticky-style-full_width {
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	border-radius: 0 !important;
	background: #FFFFFF !important;
	border-top: 1px solid var(--shrikant-ae-border) !important;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
	padding: 8px 16px max(8px, env(safe-area-inset-bottom)) !important;
}

/* Layout 3: Minimal Icons Bar (Dark Glassmorphism Theme) */
.shrikant-ae-sticky-bar.shrikant-ae-sticky-style-minimal_icons {
	bottom: max(16px, env(safe-area-inset-bottom)) !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: max-content !important;
	min-width: 290px !important;
	max-width: calc(100vw - 32px) !important;
	border-radius: 30px !important;
	background: rgba(15, 23, 42, 0.94) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	color: #FFFFFF !important;
	padding: 6px 16px !important;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.35) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.shrikant-ae-sticky-bar.shrikant-ae-sticky-style-minimal_icons .shrikant-ae-sticky-btn {
	color: #FFFFFF !important;
	opacity: 0.9 !important;
}

.shrikant-ae-sticky-bar.shrikant-ae-sticky-style-minimal_icons .shrikant-ae-sticky-btn .shrikant-ae-icon,
.shrikant-ae-sticky-bar.shrikant-ae-sticky-style-minimal_icons .shrikant-ae-sticky-btn svg {
	fill: #FFFFFF !important;
	color: #FFFFFF !important;
}

.shrikant-ae-sticky-bar.shrikant-ae-sticky-style-minimal_icons .shrikant-ae-sticky-btn:hover,
.shrikant-ae-sticky-bar.shrikant-ae-sticky-style-minimal_icons .shrikant-ae-sticky-btn:active {
	color: #FFFFFF !important;
	opacity: 1 !important;
	background: rgba(255, 255, 255, 0.18) !important;
}

.shrikant-ae-sticky-bar.shrikant-ae-sticky-style-minimal_icons .shrikant-ae-sticky-btn.is-liked {
	color: #FFFFFF !important;
	opacity: 1 !important;
	background: var(--shrikant-ae-primary) !important;
	font-weight: 700 !important;
}

.shrikant-ae-sticky-bar.shrikant-ae-sticky-style-minimal_icons .shrikant-ae-sticky-btn.is-liked .shrikant-ae-icon,
.shrikant-ae-sticky-bar.shrikant-ae-sticky-style-minimal_icons .shrikant-ae-sticky-btn.is-liked svg {
	fill: #FFFFFF !important;
	color: #FFFFFF !important;
}

.shrikant-ae-sticky-inner {
	display: flex !important;
	align-items: center !important;
	justify-content: space-around !important;
	width: 100% !important;
	gap: 6px !important;
}

.shrikant-ae-sticky-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	background: transparent !important;
	border: none !important;
	color: var(--shrikant-ae-text-secondary) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	padding: 8px 14px !important;
	border-radius: 20px !important;
	cursor: pointer !important;
	transition: var(--shrikant-ae-transition) !important;
	user-select: none !important;
	-webkit-tap-highlight-color: transparent !important;
}

.shrikant-ae-sticky-btn:hover,
.shrikant-ae-sticky-btn:active {
	color: var(--shrikant-ae-primary) !important;
	background: var(--shrikant-ae-primary-ultra-light) !important;
}

.shrikant-ae-sticky-btn.is-liked {
	color: var(--shrikant-ae-primary) !important;
	background: var(--shrikant-ae-primary-light) !important;
	font-weight: 700 !important;
}

.shrikant-ae-sticky-count,
.shrikant-ae-sticky-label {
	font-size: 13px !important;
	line-height: 1 !important;
}

@media (max-width: 768px) {
	.shrikant-ae-sticky-bar {
		display: block !important;
	}
}

/* ==========================================================================
   Form Customization & Theme Override Safety
   ========================================================================== */

.shrikant-ae-form-group {
	margin-bottom: 16px !important;
}

.shrikant-ae-label {
	display: block !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--shrikant-ae-text) !important;
	margin-bottom: 6px !important;
}

.shrikant-ae-input,
.shrikant-ae-textarea {
	width: 100% !important;
	padding: 10px 14px !important;
	border: 1px solid var(--shrikant-ae-border) !important;
	border-radius: var(--shrikant-ae-radius-sm) !important;
	background: var(--shrikant-ae-bg) !important;
	color: var(--shrikant-ae-text) !important;
	font-size: 15px !important;
	transition: var(--shrikant-ae-transition) !important;
	box-shadow: none !important;
}

.shrikant-ae-input:focus,
.shrikant-ae-textarea:focus {
	outline: none !important;
	border-color: var(--shrikant-ae-primary) !important;
	box-shadow: 0 0 0 3px var(--shrikant-ae-primary-light) !important;
}

/* High Specificity Submit Button Override to prevent theme neon green colors */
.shrikant-ae-button--primary,
input[type="submit"].shrikant-ae-button--primary,
button.shrikant-ae-button--primary,
.form-submit input[type="submit"].shrikant-ae-button--primary,
#respond input[type="submit"].shrikant-ae-button--primary {
	background-color: var(--shrikant-ae-primary) !important;
	color: #FFFFFF !important;
	border: none !important;
	padding: 12px 24px !important;
	border-radius: var(--shrikant-ae-radius-sm) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: var(--shrikant-ae-transition) !important;
	box-shadow: 0 2px 8px rgba(56, 87, 232, 0.25) !important;
	line-height: 1.2 !important;
	display: inline-block !important;
	text-decoration: none !important;
}

.shrikant-ae-button--primary:hover,
input[type="submit"].shrikant-ae-button--primary:hover,
button.shrikant-ae-button--primary:hover,
.form-submit input[type="submit"].shrikant-ae-button--primary:hover,
#respond input[type="submit"].shrikant-ae-button--primary:hover {
	background-color: var(--shrikant-ae-primary-hover) !important;
	color: #FFFFFF !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(56, 87, 232, 0.35) !important;
}

.shrikant-ae-notes {
	font-size: 13px !important;
	color: var(--shrikant-ae-text-secondary) !important;
	margin-bottom: 16px !important;
}

/* Inline Comment Validation Alert */
.shrikant-ae-alert {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px 16px !important;
	border-radius: var(--shrikant-ae-radius-sm) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	margin-bottom: 16px !important;
}

.shrikant-ae-alert--error {
	background: #fef2f2 !important;
	border: 1px solid #fecaca !important;
	color: #991b1b !important;
}

.shrikant-ae-alert-icon {
	font-size: 16px !important;
}

@media (prefers-reduced-motion: reduce) {
	.shrikant-ae-btn,
	.shrikant-ae-button--primary,
	.shrikant-ae-sticky-bar,
	.shrikant-ae-floating-btn {
		transition: none !important;
		animation: none !important;
		transform: none !important;
	}
}