/* ==========================================================================
   SHAHAZ.COM — Live Purchase Social Proof Popup CSS
   ফাইল: assets/css/live-popup.css
   ========================================================================== */




/*************************************************************
 * FEATURE NAME: Live Purchase Social Proof Popup
 * Purpose: Desktop-এ নিচে-বামে (Bottom Left), Mobile-এ Sticky
 *          Navigation-এর ঠিক উপরে — একটা সাময়িক, নন-ইন্ট্রুসিভ
 *          নোটিফিকেশন কার্ড যা আসল সাম্প্রতিক অর্ডার থেকে সামাজিক-
 *          প্রমাণ (Social Proof) দেখায়।
 * Files: assets/css/live-popup.css, assets/js/live-purchase-popup.js,
 *          template-parts/home/17-live-popup.php
 * Dependencies: assets/css/shahaz-tokens.css (রং ভ্যারিয়েবল),
 *          assets/css/mobile-navigation.css-এর
 *          --shahaz-mobile-nav-height ভ্যারিয়েবল (মোবাইলে পজিশনিং-এর
 *          জন্য — উভয় ফাইল একই :root ভ্যারিয়েবল শেয়ার করে, তাই
 *          এনকিউ-অর্ডার নিয়ে চিন্তা করতে হয় না)
 * Future Customization Notes: পপ-আপের প্রস্থ/পজিশন বদলাতে শুধু
 *          .shahaz-live-popup-এর left/bottom/max-width বদলান।
 *************************************************************/
.shahaz-live-popup {
	position: fixed;
	left: 14px;
	bottom: 84px;
	max-width: 300px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--shahaz-white);
	border: 0.5px solid var(--shahaz-border-pearl);
	border-radius: var(--shahaz-radius-md);
	box-shadow: var(--shahaz-shadow-lift);
	padding: 10px 12px;
	z-index: 500;
	transform: translateY(20px);
	opacity: 0;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

.shahaz-live-popup.shahaz-live-popup-visible {
	transform: translateY(0);
	opacity: 1;
}

.shahaz-live-popup-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--shahaz-gradient-magenta-gold);
	color: var(--shahaz-white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.shahaz-live-popup-icon svg {
	width: 16px;
	height: 16px;
}

.shahaz-live-popup-body {
	flex: 1;
	min-width: 0;
}

.shahaz-live-popup-text {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--shahaz-ink);
	margin: 0;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.shahaz-live-popup-time {
	font-size: 10px;
	color: var(--shahaz-gray);
}

.shahaz-live-popup-close {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--shahaz-ink);
	color: var(--shahaz-white);
	border: none;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.shahaz-live-popup-close:focus-visible {
	outline: 2px solid var(--shahaz-gold);
	outline-offset: 2px;
}




/*************************************************************
 * FEATURE NAME: Mobile Positioning (Above Sticky Navigation)
 * Purpose: মোবাইলে পপ-আপ যেন কখনো Sticky Bottom Navigation-এর নিচে
 *          চাপা না পড়ে বা তার উপর ওভারল্যাপ না করে — নেভিগেশনের
 *          উচ্চতা + সামান্য গ্যাপ যোগ করে bottom পজিশন গণনা করা হয়।
 * Files: assets/css/mobile-navigation.css (height variable-এর উৎস)
 * Dependencies: --shahaz-mobile-nav-height (mobile-navigation.css-এ
 *          সংজ্ঞায়িত, না থাকলে ৬৪px ফলব্যাক ব্যবহার হয়)
 * Future Customization Notes: নেভিগেশনের উচ্চতা বদলালে এখানে কিছু
 *          বদলাতে হবে না — ভ্যারিয়েবল স্বয়ংক্রিয়ভাবে সিঙ্ক থাকবে।
 *************************************************************/
@media (max-width: 768px) {
	.shahaz-live-popup {
		left: 8px;
		right: 8px;
		max-width: none;
		bottom: calc(var(--shahaz-mobile-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 12px);
	}
}