/**
 * Community Messaging Paywall Styles
 *
 * Handles visual locking of messaging features and paywall modal styling.
 *
 * @package    GaySaunaGuide
 * @subpackage GaySaunaGuide/public/css
 * @since      1.14.0
 */

/* ============================================================
   BLUR AND LOCK MESSAGING UI
   ============================================================ */

/**
 * Blur and disable messaging interface for non-subscribers.
 * Only applies when user is ON the messaging page (not on the button to get there).
 * Targets Fluent Community's actual messaging classes.
 * Excludes navigation/menu items.
 */
body.gsg-no-messaging-access.gsg-on-messaging-page .fcom_chat_wrap,
body.gsg-no-messaging-access.gsg-on-messaging-page [class*="fcom_chat"]:not(.fcom_chat_menu):not(.fcom_chat_notification_holder),
body.gsg-no-messaging-access.gsg-on-messaging-page [class*="fcomc_"],
body.gsg-no-messaging-access.gsg-on-messaging-page #fcom_chat_app_wrap,
body.gsg-no-messaging-access.gsg-on-messaging-page [class*="fluent-messaging"],
body.gsg-no-messaging-access.gsg-on-messaging-page [class*="fcom-messages"],
body.gsg-no-messaging-access.gsg-on-messaging-page [data-messaging-container],
body.gsg-no-messaging-access.gsg-on-messaging-page .messaging-container {
	position: relative;
	filter: blur(8px);
	pointer-events: none;
	user-select: none;
}

/* Explicitly ensure navigation items are never blurred */
.fcom_chat_menu,
.fcom_chat_notification_holder,
.fcom_user_context_menu_items,
/* Profile page message buttons */
[class*="fcom_profile"] [class*="message"],
[class*="fcom_user"] [class*="message"],
.fcom_profile_actions [class*="message"],
/* General navigation links */
a[href*="/chat"],
a[href*="/messages"] {
	filter: none !important;
	pointer-events: auto !important;
	user-select: auto !important;
}

/* ============================================================
   PAYWALL BACKDROP
   ============================================================ */

.gsg-paywall-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 999998;
	backdrop-filter: blur(4px);
	pointer-events: auto; /* Ensure backdrop blocks all clicks */
}

/* ============================================================
   PAYWALL MODAL
   ============================================================ */

.gsg-messaging-paywall-overlay {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	padding: 40px;
	max-width: 500px;
	width: 90%;
	z-index: 999999;
	text-align: center;
}

/* Close button */
.gsg-paywall-close {
	position: absolute;
	top: 15px;
	right: 15px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #999;
	padding: 0;
	width: 30px;
	height: 30px;
	transition: color 0.2s;
}

.gsg-paywall-close:hover {
	color: #333;
}

/* Lock icon */
.gsg-paywall-icon {
	font-size: 64px;
	margin-bottom: 20px;
	line-height: 1;
}

/* Title */
.gsg-paywall-title {
	font-size: 28px;
	font-weight: 600;
	margin: 0 0 10px 0;
	color: #333;
}

/* Description */
.gsg-paywall-description {
	font-size: 16px;
	color: #666;
	margin: 0 0 30px 0;
	line-height: 1.5;
}

/* Price */
.gsg-paywall-price {
	font-size: 36px;
	font-weight: 700;
	color: #2271b1;
	margin: 0 0 20px 0;
}

/* Features list */
.gsg-paywall-features {
	list-style: none;
	padding: 0;
	margin: 0 0 30px 0;
	text-align: left;
}

.gsg-paywall-features li {
	padding: 12px 0;
	border-bottom: 1px solid #eee;
	font-size: 15px;
	color: #333;
	position: relative;
	padding-left: 30px;
}

.gsg-paywall-features li:last-child {
	border-bottom: none;
}

.gsg-paywall-features li:before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #46b450;
	font-weight: bold;
	font-size: 18px;
}

/* Subscribe button */
.gsg-paywall-button {
	display: inline-block;
	background: #2271b1;
	color: #ffffff;
	padding: 15px 40px;
	border-radius: 6px;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background 0.3s, transform 0.1s;
}

.gsg-paywall-button:hover {
	background: #135e96;
	transform: translateY(-1px);
}

.gsg-paywall-button:active {
	transform: translateY(0);
}

.gsg-paywall-button:disabled {
	background: #ccc;
	cursor: not-allowed;
	transform: none;
}

/* Footer text */
.gsg-paywall-footer {
	margin: 20px 0 0 0;
	color: #999;
	font-size: 13px;
}

/* ============================================================
   LOADING STATE
   ============================================================ */

.gsg-paywall-button.loading:after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 10px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: gsg-spin 0.6s linear infinite;
}

@keyframes gsg-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {
	.gsg-messaging-paywall-overlay {
		padding: 30px 20px;
		width: 95%;
	}

	.gsg-paywall-title {
		font-size: 24px;
	}

	.gsg-paywall-price {
		font-size: 32px;
	}

	.gsg-paywall-button {
		font-size: 16px;
		padding: 12px 30px;
	}
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

.gsg-messaging-paywall-overlay,
.gsg-paywall-backdrop {
	animation: gsg-fade-in 0.3s ease-out;
}

@keyframes gsg-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}