/**
 * Social Features Styles - Likes, Comments, Sharing
 *
 * @package Aistros
 * @since 1.0.0
 */

/* ========================================================================
   Social Actions Container
   ======================================================================== */

.aistros-social-actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm); /* Adjusted from 15px */
	padding: var(--spacing-xs) 0;
}

.aistros-social-actions button {
	background: none;
	border: none;
	display: inline-flex;
	align-items: center;
	gap: 6px; /* Keep 6px for now */
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--aistros-radius-sm);
	font-size: calc(var(--font-size-base) - 2px); /* 0.9rem */
	color: var(--text-secondary);
	cursor: pointer;
	font-weight: var(--font-weight-medium);
}

.aistros-social-actions button:hover {
	background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}

.aistros-social-actions svg {
	width: var(--spacing-md);
	height: var(--spacing-md);
}

/* ========================================================================
   Like Button
   ======================================================================== */

.aistros-like-btn {
	position: relative;
}

.aistros-like-btn .heart-icon {
	fill: none;
	stroke: currentColor;
}

.aistros-like-btn.liked {
	color: var(--danger-color);
}

.aistros-like-btn.liked .heart-icon {
	fill: var(--danger-color);
	stroke: var(--danger-color);
}



.aistros-like-btn.processing {
	pointer-events: none;
	opacity: 0.7;
}

.like-count {
	font-variant-numeric: tabular-nums;
	min-width: var(--spacing-md);
	text-align: left;
}

/* ========================================================================
   Repost Button
   ======================================================================== */

.aistros-repost-btn {
	position: relative;
}

.aistros-repost-btn:hover svg {
	stroke: var(--secondary-color);
}

.aistros-repost-btn.reposted {
	color: var(--secondary-color);
}

.aistros-repost-btn.reposted svg {
	stroke: var(--secondary-color);
}

.aistros-repost-btn.processing {
	pointer-events: none;
	opacity: 0.7;
}

.repost-count {
	font-variant-numeric: tabular-nums;
	min-width: var(--spacing-md);
	text-align: left;
}

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

.aistros-comment-btn:hover {
	color: var(--info-color);
}

.aistros-comment-btn:hover svg {
	stroke: var(--info-color);
}

/* ========================================================================
   Share Button
   ======================================================================== */

.aistros-share-btn:hover {
	color: var(--success-color);
}

.aistros-share-btn:hover svg {
	stroke: var(--success-color);
}

/* ========================================================================
   Bookmark Button
   ======================================================================== */

.aistros-bookmark-btn:hover {
	color: var(--warning-color);
}

.aistros-bookmark-btn svg {
	fill: none;
	stroke: currentColor;
}

.aistros-bookmark-btn.bookmarked {
	color: var(--warning-color);
}

.aistros-bookmark-btn.bookmarked svg {
	fill: var(--warning-color);
	stroke: var(--warning-color);
}

.aistros-bookmark-btn.processing {
	pointer-events: none;
	opacity: 0.7;
}

/* ========================================================================
   Toast Notifications
   ======================================================================== */

.aistros-toast {
	position: fixed;
	bottom: var(--spacing-lg);
	left: 50%;
	transform: translateX(-50%) translateY(100px);
	background: rgba(0, 0, 0, 0.85); /* Keep explicit rgba for toast background */
	color: var(--text-inverse);
	padding: var(--spacing-sm) var(--spacing-lg);
	border-radius: var(--aistros-radius-full);
	font-size: calc(var(--font-size-base) - 2px); /* 0.9rem */
	font-weight: var(--font-weight-medium);
	z-index: 10000;
	opacity: 0;
	box-shadow: var(--aistros-shadow-md);
	backdrop-filter: blur(10px);
}

.aistros-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.aistros-toast-success {
	background: linear-gradient(135deg, var(--success-color), color-mix(in srgb, var(--success-color) 90%, black));
}

.aistros-toast-error {
	background: linear-gradient(135deg, var(--danger-color), color-mix(in srgb, var(--danger-color) 90%, black));
}

/* ========================================================================
   Share Modal/Sheet (Optional future enhancement)
   ======================================================================== */

.share-modal {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--bg-body);
	border-radius: var(--spacing-md) var(--spacing-md) 0 0; /* Adjusted 20px */
	padding: var(--spacing-md);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2); /* Keep rgba for now, or define specific shadow */
	transform: translateY(100%);
	z-index: 9999;
}

.share-modal.active {
	transform: translateY(0);
}

.share-modal-header {
	text-align: center;
	padding-bottom: var(--spacing-sm); /* Adjusted 15px */
	border-bottom: 1px solid var(--border-color);
	margin-bottom: var(--spacing-md);
}

.share-modal-title {
	font-size: calc(var(--font-size-base) + 1px); /* 1.1rem */
	font-weight: var(--font-weight-semibold);
	margin: 0;
}

.share-options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: var(--spacing-sm); /* Adjusted 15px */
}

.share-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--spacing-sm) var(--spacing-xs); /* Adjusted 15px 10px */
	border-radius: var(--aistros-radius-lg);
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

.share-option:hover {
	background: var(--bg-light);
}

.share-option svg {
	width: var(--spacing-lg); /* 32px */
	height: var(--spacing-lg); /* 32px */
	margin-bottom: var(--spacing-xs);
}

.share-option span {
	font-size: calc(var(--font-size-base) - 3px); /* 0.85rem */
	text-align: center;
}

/* Social Platform Colors (Brand specific, keep as is) */
.share-option[data-platform="facebook"] svg {
	color: #1877f2;
}

.share-option[data-platform="twitter"] svg {
	color: #1da1f2;
}

.share-option[data-platform="telegram"] svg {
	color: #0088cc;
}

.share-option[data-platform="whatsapp"] svg {
	color: #25d366;
}

.share-option[data-platform="copy"] svg {
	color: var(--text-secondary);
}

/* ========================================================================
   Responsive
   ======================================================================== */

@media (max-width: 480px) {
	.aistros-social-actions {
		gap: var(--spacing-xs);
	}

	.aistros-social-actions button {
		padding: 6px var(--spacing-xs);
		font-size: calc(var(--font-size-base) - 3px); /* 0.85rem */
	}

	.aistros-social-actions svg {
		width: calc(var(--spacing-md) - 2px); /* 18px */
		height: calc(var(--spacing-md) - 2px); /* 18px */
	}

	.aistros-toast {
		bottom: var(--spacing-md);
		left: var(--spacing-sm);
		right: var(--spacing-sm);
		transform: translateX(0) translateY(100px);
	}

	.aistros-toast.show {
		transform: translateX(0) translateY(0);
	}
}

/* ========================================================================
   Dark Mode Support (for cosmic theme)
   ======================================================================== */

body.theme-cosmic .aistros-social-actions button {
	color: var(--dark-mode-text-dim);
}

body.theme-cosmic .aistros-social-actions button:hover {
	background: rgba(255, 255, 255, 0.1); /* Keep explicit rgba for this specific effect */
	color: var(--dark-mode-text);
}

body.theme-cosmic .aistros-like-btn.liked {
	color: var(--dark-mode-pink);
}

body.theme-cosmic .aistros-like-btn.liked .heart-icon {
	fill: var(--dark-mode-pink);
	stroke: var(--dark-mode-pink);
}

/* ========================================================================
   Accessibility
   ======================================================================== */

.aistros-social-actions button:focus {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}