/**
 * BuddyPress Compact Link Preview Styles
 * 
 * Replicates the classic Activity Plus Reloaded styling with compact 180px thumbnails.
 *
 * @package BP_Compact_Link_Preview
 * @version 1.0.0
 */

/* ========================================================================
   Main Link Preview Container
   ======================================================================== */

.bp-compact-link-preview-wrapper {
	margin: 15px 0;
	padding: 15px;
	background: #f9f9f9;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	overflow: auto;
	zoom: 1;
	clear: both;
}

/* ========================================================================
   Thumbnail Container - Compact 180x135px Style
   ======================================================================== */

.bpfb_link_preview_container {
	width: 180px;
	height: 135px;
	overflow: hidden;
	float: left;
	margin-right: 15px;
	border-radius: 3px;
	background: #e0e0e0;
	position: relative;
}

.bpfb_final_link .bpfb_link_preview_container {
	float: left;
}

.bpfb_link_preview_container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block !important;
	border: none;
	position: absolute;
	top: 0;
	left: 0;
	visibility: visible !important;
	opacity: 1 !important;
}

.bpfb_link_preview_container a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}

/* ========================================================================
   Content Area - Title, Description, URL
   ======================================================================== */

.bpfb_final_link .bpfb_link_contents {
	overflow: hidden;
	/* This allows the content to fill remaining space next to floated thumbnail */
}

.bpfb_link_preview_title {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	margin: 0 0 8px 0;
	color: #2c3e50;
}

.bpfb_link_preview_title a {
	color: #2c3e50;
	text-decoration: none;
}

.bpfb_link_preview_title a:hover {
	color: #3498db;
	text-decoration: underline;
}

.bpfb_link_preview_text {
	font-size: 13px;
	line-height: 1.5;
	color: #666;
	margin: 0 0 8px 0;
	max-height: 80px;
	overflow: hidden;
}

.bpfb_link_preview_url {
	font-size: 12px;
	color: #3498db;
	margin-top: 5px;
	word-break: break-all;
	line-height: 1.4;
}

.bpfb_link_preview_url a {
	color: #3498db;
	text-decoration: none;
}

.bpfb_link_preview_url a:hover {
	color: #2980b9;
	text-decoration: underline;
}

/* ========================================================================
   Activity Form Styling
   ======================================================================== */

.activity-form .bp-compact-link-preview-wrapper {
	margin: 10px 0;
	background: #fff;
}

/* Preview in the activity update form */
#bp-compact-lp-preview-container {
	margin: 10px 0;
}

/* ========================================================================
   Comments & Replies - Slightly Smaller
   ======================================================================== */

.activity-comments .bp-compact-link-preview-wrapper {
	padding: 12px;
	margin: 10px 0;
}

.activity-comments .bpfb_link_preview_container {
	width: 140px;
	height: 105px;
	margin-right: 12px;
}

.activity-comments .bpfb_link_preview_title {
	font-size: 14px;
	margin-bottom: 6px;
}

.activity-comments .bpfb_link_preview_text {
	font-size: 12px;
	max-height: 60px;
}

.activity-comments .bpfb_link_preview_url {
	font-size: 11px;
}

/* ========================================================================
   Video Links - Same Compact Style
   ======================================================================== */

.bp-compact-link-preview-wrapper.video-link .bpfb_link_preview_container {
	/* Videos use same compact thumbnail style */
	position: relative;
	cursor: pointer;
	transition: all 0.3s ease;
}

/* Play icon overlay for video thumbnails */
.bp-video-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 48px;
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
	pointer-events: none;
	z-index: 10;
	transition: all 0.3s ease;
	background: rgba(0, 0, 0, 0.5);
	width: 70px;
	height: 70px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding-left: 5px; /* Optical centering for play icon */
}

/* Hover effect on video thumbnail */
.bp-compact-link-preview-wrapper.video-link .bpfb_link_preview_container:hover .bp-video-play-icon {
	background: rgba(255, 0, 0, 0.8);
	transform: translate(-50%, -50%) scale(1.1);
}

.bp-compact-link-preview-wrapper.video-link .bpfb_link_preview_container:hover {
	opacity: 0.9;
}

/* Make video title clickable with pointer cursor */
.bp-compact-link-preview-wrapper.video-link .bpfb_link_preview_title a.bp-video-play-trigger {
	cursor: pointer;
}

.bp-compact-link-preview-wrapper.video-link .bpfb_link_preview_title a.bp-video-play-trigger:hover {
	color: #e74c3c;
}

/* Video player expanded state */
.bp-compact-link-preview-wrapper.bp-video-expanded {
	padding: 15px;
	clear: both;
}

.bp-compact-link-preview-wrapper.bp-video-expanded .bpfb_link_preview_container {
	width: 100%;
	max-width: 640px;
	height: 360px;
	float: none;
	margin: 0 0 15px 0;
	position: relative;
	background: #000;
	overflow: visible; /* Changed from hidden */
}

/* Iframe styling for embedded players */
.bp-compact-link-preview-wrapper.bp-video-playing .bpfb_link_preview_container iframe {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	border: none !important;
	border-radius: 0 !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 1 !important;
}

/* Content adjustments when video is playing */
.bp-compact-link-preview-wrapper.bp-video-playing .bpfb_link_contents {
	width: 100%;
	max-width: 640px;
	float: none;
	clear: both;
}

/* Loading state for video */
.bp-compact-link-preview-wrapper.bp-video-loading .bpfb_link_preview_container::after {
	content: "Loading video...";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
	font-size: 14px;
	z-index: 20;
}

/* ========================================================================
   Loading State
   ======================================================================== */

.bp-compact-link-preview-loading {
	padding: 20px;
	text-align: center;
	color: #999;
	font-style: italic;
}

.bp-compact-link-preview-loading::before {
	content: "⏳ ";
}

/* ========================================================================
   Error State
   ======================================================================== */

.bp-compact-link-preview-error {
	padding: 15px;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 3px;
	color: #856404;
	margin: 10px 0;
}

/* ========================================================================
   Close/Remove Button (for activity form preview)
   ======================================================================== */

.bp-compact-lp-remove-preview {
	position: absolute;
	top: 8px;
	right: 8px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	text-align: center;
	z-index: 10;
}

.bp-compact-lp-remove-preview:hover {
	background: rgba(0, 0, 0, 0.8);
}

.bp-compact-lp-remove-preview:focus {
	outline: 2px solid #3498db;
	outline-offset: 2px;
}

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

@media screen and (max-width: 640px) {
	.bpfb_link_preview_container {
		width: 120px;
		height: 90px;
		margin-right: 10px;
	}

	.bpfb_link_preview_title {
		font-size: 14px;
	}

	.bpfb_link_preview_text {
		font-size: 12px;
		max-height: 60px;
	}

	.bp-compact-link-preview-wrapper {
		padding: 12px;
	}

	.activity-comments .bpfb_link_preview_container {
		width: 100px;
		height: 75px;
	}

	/* Video player on mobile */
	.bp-compact-link-preview-wrapper.bp-video-expanded .bpfb_link_preview_container {
		max-width: 100%;
		width: 100% !important;
		height: auto !important;
		min-height: 200px;
	}

	.bp-compact-link-preview-wrapper.bp-video-playing .bpfb_link_preview_container iframe {
		width: 100% !important;
		height: 100% !important;
		min-height: 200px;
	}

	.bp-video-play-icon {
		font-size: 36px;
		width: 55px;
		height: 55px;
	}
}

@media screen and (max-width: 480px) {
	/* Stack on very small screens */
	.bpfb_link_preview_container {
		float: none;
		width: 100%;
		max-width: 300px;
		height: auto;
		margin: 0 0 10px 0;
	}

	.bpfb_link_preview_container img {
		height: auto;
		max-height: 200px;
		position: relative;
	}

	.bpfb_link_contents {
		width: 100%;
	}

	/* Video player on very small screens */
	.bp-compact-link-preview-wrapper.bp-video-expanded {
		padding: 10px;
	}

	.bp-compact-link-preview-wrapper.bp-video-expanded .bpfb_link_preview_container {
		width: 100% !important;
		height: auto !important;
		min-height: 180px;
	}

	.bp-video-play-icon {
		font-size: 32px;
		width: 50px;
		height: 50px;
	}
}

/* ========================================================================
   Clearfix
   ======================================================================== */

.bp-compact-link-preview-wrapper::after,
.bpfb_final_link::after {
	content: "";
	display: table;
	clear: both;
}

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

.bp-compact-link-preview-wrapper a:focus {
	outline: 2px solid #3498db;
	outline-offset: 2px;
}

/* Screen reader only text */
.bp-compact-lp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ========================================================================
   Compatibility with BuddyBoss & Kleo Theme
   ======================================================================== */

/* BuddyBoss specific */
.buddyboss-theme .bp-compact-link-preview-wrapper {
	border-radius: 4px;
}

/* Kleo theme specific */
.kleo-main-header ~ * .bp-compact-link-preview-wrapper {
	/* Ensure proper spacing in Kleo theme */
}

/* ========================================================================
   Hide iframe/embed elements (force link preview only)
   ======================================================================== */

.activity-inner iframe[src*="youtube"],
.activity-inner iframe[src*="youtu.be"],
.activity-inner iframe[src*="vimeo"],
.activity-inner embed,
.activity-inner object {
	/* These are hidden by the plugin's PHP filter, but adding CSS backup */
	display: none !important;
}

/* But allow link preview iframes if any custom implementation needs them */
.bp-compact-link-preview-wrapper iframe {
	display: block !important;
	max-width: 100%;
}

/* ========================================================================
   Social Media Embeds
   ======================================================================== */

/* Social media embed icon (eye icon) */
.bp-social-embed-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 40px;
	color: white;
	text-shadow: 0 2px 4px rgba(0,0,0,0.5);
	pointer-events: none;
	transition: all 0.3s ease;
	background: rgba(0, 0, 0, 0.5);
	width: 70px;
	height: 70px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.bp-social-embed-trigger:hover .bp-social-embed-icon {
	background: rgba(59, 89, 152, 0.8); /* Facebook blue on hover */
	transform: translate(-50%, -50%) scale(1.1);
}

/* Close button for expanded embeds */
.bp-embed-close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	border: 2px solid white;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: all 0.2s ease;
}

.bp-embed-close-btn:hover {
	background: rgba(220, 53, 69, 0.9);
	transform: scale(1.1);
}

.bp-embed-close-btn:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Social embed expanded state */
.bp-compact-link-preview-wrapper.bp-social-expanded {
	padding: 15px;
	clear: both;
}

.bp-compact-link-preview-wrapper.bp-social-expanded .bpfb_link_preview_container {
	width: 100%;
	max-width: 640px;
	float: none;
	margin: 0 0 15px 0;
	position: relative;
	overflow: visible !important;
}

/* Social embed iframes and blockquotes */
.bp-compact-link-preview-wrapper.bp-social-playing .bpfb_link_preview_container iframe,
.bp-compact-link-preview-wrapper.bp-social-playing .bpfb_link_preview_container blockquote {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	border: none !important;
	margin: 0 auto !important;
}

/* Instagram embed specific */
.bp-compact-link-preview-wrapper.bp-social-playing .instagram-media {
	max-width: 540px !important;
	margin: 0 auto !important;
}

/* Twitter embed specific */
.bp-compact-link-preview-wrapper.bp-social-playing .twitter-tweet {
	margin: 0 auto !important;
}

/* TikTok embed specific */
.bp-compact-link-preview-wrapper.bp-social-playing .tiktok-embed {
	max-width: 605px !important;
	margin: 0 auto !important;
}

/* Loading indicator for social embeds */
.bp-social-loading {
	text-align: center;
	padding: 40px 20px;
	color: #666;
	font-size: 14px;
}

.bp-social-loading::before {
	content: "⏳";
	display: block;
	font-size: 30px;
	margin-bottom: 10px;
	animation: bp-pulse 1.5s ease-in-out infinite;
}

@keyframes bp-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* Content adjustments when social embed is playing */
.bp-compact-link-preview-wrapper.bp-social-playing .bpfb_link_contents {
	width: 100%;
	max-width: 640px;
	float: none;
	clear: both;
}

/* Mobile responsive for social embeds */
@media screen and (max-width: 640px) {
	.bp-compact-link-preview-wrapper.bp-social-expanded .bpfb_link_preview_container {
		max-width: 100%;
		width: 100% !important;
	}

	.bp-social-embed-icon {
		font-size: 32px;
		width: 55px;
		height: 55px;
	}

	/* Instagram mobile fix */
	.instagram-media {
		min-width: 326px !important;
		max-width: 100% !important;
	}

	.bp-compact-link-preview-wrapper.bp-social-playing .instagram-media {
		width: 100% !important;
	}

	/* Ensure Instagram script loads properly on mobile */
	.bp-compact-link-preview-wrapper.bp-social-playing iframe[src*="instagram"] {
		width: 100% !important;
		max-width: 100% !important;
	}
}