/**
 * Feedspace Frontend Styles
 *
 * Clean, modern styling for frontend display
 */

/* Wall of Love Container */
.feedspace-wall-of-love {
	position: relative;
	width: 100%;
	margin: 2rem 0;
	display: block;
}

/* Shortcode specific styles */
.feedspace-wall-of-love.feedspace-shortcode {
	/* Additional styles for shortcode usage */
}

/* Empty state styling */
.feedspace-empty-state {
	background: #f8f9fa;
	border: 2px dashed #dee2e6;
	border-radius: 8px;
	padding: 2rem;
	text-align: center;
	color: #6c757d;
}

.feedspace-empty-state p {
	margin: 0 0 1rem 0;
	font-size: 1rem;
	line-height: 1.5;
}

.feedspace-empty-state a {
	color: #007cba;
	text-decoration: none;
	font-weight: 500;
}

.feedspace-empty-state a:hover {
	text-decoration: underline;
}

/* Feedspace Embed Content Styles - Match Admin Preview */
.feedspace-wall-of-love .feedspace-embed {
	overflow: visible !important;
}

.feedspace-wall-of-love .feedspace-embed > * {
	max-width: 100% !important;
	overflow: visible !important;
}

/* Ensure proper spacing and prevent overlapping */
.feedspace-wall-of-love .feedspace-embed [class*="feedspace-"] {
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* Fix for overlapping cards */
.feedspace-wall-of-love .feedspace-embed [class*="card"],
.feedspace-wall-of-love .feedspace-embed [class*="testimonial"],
.feedspace-wall-of-love .feedspace-embed [class*="review"] {
	position: relative !important;
	margin: 10px !important;
	z-index: 1 !important;
}

/* Ensure proper grid/flex layout */
.feedspace-wall-of-love .feedspace-embed [class*="grid"],
.feedspace-wall-of-love .feedspace-embed [class*="flex"] {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
	gap: 20px !important;
	align-items: start !important;
}

/* Additional fixes for Feedspace embed content */
.feedspace-wall-of-love .feedspace-embed {
	/* Reset any conflicting styles */
	all: initial;
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: auto;
	min-height: 200px;
}

.feedspace-wall-of-love .feedspace-embed * {
	box-sizing: border-box;
}

/* Force proper layout for any Feedspace content */
.feedspace-wall-of-love .feedspace-embed > div {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
	gap: 20px !important;
	padding: 20px !important;
}

/* Ensure cards don't overlap */
.feedspace-wall-of-love .feedspace-embed > div > div {
	position: relative !important;
	margin: 0 !important;
	padding: 15px !important;
	background: white !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
	overflow: hidden !important;
}

/* Fix for any absolute positioned elements */
.feedspace-wall-of-love .feedspace-embed [style*="position: absolute"] {
	position: relative !important;
}

/* Ensure proper text wrapping */
.feedspace-wall-of-love .feedspace-embed * {
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}

/* Override any inline styles that might cause overlapping */
.feedspace-wall-of-love .feedspace-embed [style*="position: absolute"],
.feedspace-wall-of-love .feedspace-embed [style*="position:fixed"] {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
}

/* Force proper stacking context */
.feedspace-wall-of-love .feedspace-embed {
	transform: translateZ(0);
	will-change: transform;
}

/* Ensure all direct children are properly positioned */
.feedspace-wall-of-love .feedspace-embed > * {
	position: relative !important;
	z-index: auto !important;
}

/* Fix for any floating elements */
.feedspace-wall-of-love .feedspace-embed [style*="float"] {
	float: none !important;
	display: block !important;
}

/* Additional fixes for specific Feedspace content patterns */
.feedspace-wall-of-love .feedspace-embed {
	/* Ensure the container itself doesn't cause issues */
	contain: layout style paint;
}

/* Force grid layout on any container that might have cards */
.feedspace-wall-of-love .feedspace-embed > div:not(:only-child) {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
	gap: 20px !important;
	align-items: start !important;
	padding: 20px !important;
}

/* Ensure individual cards are properly contained */
.feedspace-wall-of-love .feedspace-embed > div > div {
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	position: relative !important;
	transform: none !important;
}

/* Fix for any elements with negative margins or absolute positioning */
.feedspace-wall-of-love .feedspace-embed [style*="margin"] {
	margin: 0 !important;
}

.feedspace-wall-of-love .feedspace-embed [style*="top"],
.feedspace-wall-of-love .feedspace-embed [style*="left"] {
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
}

/* Ensure proper z-index stacking */
.feedspace-wall-of-love .feedspace-embed * {
	z-index: auto !important;
}

/* Fix for any overflow issues */
.feedspace-wall-of-love .feedspace-embed,
.feedspace-wall-of-love .feedspace-embed > div {
	overflow: visible !important;
}

/* Ensure proper spacing between elements */
.feedspace-wall-of-love .feedspace-embed > div > div + div {
	margin-top: 0 !important;
}

/* Specific fixes for common Feedspace widget patterns */
.feedspace-wall-of-love .feedspace-embed [class*="widget"],
.feedspace-wall-of-love .feedspace-embed [class*="container"],
.feedspace-wall-of-love .feedspace-embed [class*="wrapper"] {
	position: relative !important;
	width: 100% !important;
	height: auto !important;
	overflow: visible !important;
}

/* Fix for any masonry or absolute positioned layouts */
.feedspace-wall-of-love .feedspace-embed [class*="masonry"],
.feedspace-wall-of-love .feedspace-embed [class*="grid"] {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
	gap: 20px !important;
	position: relative !important;
}

/* Ensure all child elements are properly positioned */
.feedspace-wall-of-love .feedspace-embed [class*="masonry"] > *,
.feedspace-wall-of-love .feedspace-embed [class*="grid"] > * {
	position: relative !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 15px !important;
	background: white !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Responsive design */
@media (max-width: 768px) {
	.feedspace-wall-of-love {
		margin: 1rem 0;
	}

	.feedspace-empty-state {
		padding: 1.5rem;
	}

	/* Responsive adjustments for preview */
	.feedspace-wall-of-love .feedspace-embed [class*="grid"],
	.feedspace-wall-of-love .feedspace-embed [class*="flex"] {
		grid-template-columns: 1fr !important;
		gap: 15px !important;
	}

	.feedspace-wall-of-love .feedspace-embed > div {
		grid-template-columns: 1fr !important;
		gap: 15px !important;
		padding: 15px !important;
	}

	.feedspace-wall-of-love .feedspace-embed [class*="masonry"],
	.feedspace-wall-of-love .feedspace-embed [class*="grid"] {
		grid-template-columns: 1fr !important;
		gap: 15px !important;
	}

	.feedspace-wall-of-love .feedspace-embed > div:not(:only-child) {
		grid-template-columns: 1fr !important;
		gap: 15px !important;
		padding: 15px !important;
	}
}

/* Loading state */
.feedspace-wall-of-love.loading {
	opacity: 0.6;
	pointer-events: none;
}

.feedspace-wall-of-love.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	border: 2px solid #f3f3f3;
	border-top: 2px solid #007cba;
	border-radius: 50%;
	animation: feedspace-spin 1s linear infinite;
	transform: translate(-50%, -50%);
}

@keyframes feedspace-spin {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Error state */
.feedspace-wall-of-love.error {
	border: 2px solid #dc3232;
	border-radius: 8px;
	padding: 1rem;
	background: #fff5f5;
}

.feedspace-wall-of-love.error::before {
	content: 'Error: Invalid embed code';
	color: #dc3232;
	font-weight: 500;
	margin-bottom: 0.5rem;
	display: block;
}

/* Ensure proper iframe responsiveness */
.feedspace-wall-of-love iframe {
	max-width: 100%;
	height: auto;
}

/* Print styles */
@media print {
	.feedspace-wall-of-love {
		page-break-inside: avoid;
	}
}