/* ============================================================
   Premium Plans + Boost Profile – Modern UI overrides (CSS-only)
   Covers:
     1. .subscription-plans-container  (premium plans page)
     2. .booster-plans-container       (boost profile page)
     3. Plan transaction page          (.lw-credit-balance area)
   No functionality affected – all IDs and JS hooks untouched.
   ============================================================ */

/* ── Shared tokens ── */
:root {
	--pb-primary:   var(--lw-primary-color, #e10b2d);
	--pb-dark-1:    #1a1a2e;
	--pb-dark-2:    #16213e;
	--pb-dark-3:    #0f3460;
	--pb-green:     #22c55e;
	--pb-radius:    16px;
	--pb-radius-sm: 10px;
	--pb-ease:      0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================================
   SHARED CONTAINER (plans + boost)
   ============================================================ */
.subscription-plans-container,
.booster-plans-container {
	background: linear-gradient(160deg,
		var(--pb-dark-1)  0%,
		var(--pb-dark-2) 50%,
		var(--pb-dark-3) 100%) !important;
	min-height: 100vh !important;
	padding: 48px 20px 64px !important;
}

/* ── Page header ── */
.subscription-plans-container .page-header h1,
.booster-plans-container .page-header h1 {
	color: #ffffff !important;
	font-size: 2rem !important;
	font-weight: 800 !important;
	text-shadow: 0 2px 12px rgba(0,0,0,0.30);
	margin-bottom: 10px !important;
}
.subscription-plans-container .page-header p,
.booster-plans-container .page-header p {
	color: rgba(255,255,255,0.70) !important;
	font-size: 1rem !important;
}
.subscription-plans-container .page-header,
.booster-plans-container .page-header {
	margin-bottom: 36px !important;
}

/* ── Pricing toggle (plans page) ── */
.pricing-toggle-container {
	margin-bottom: 32px !important;
}
.pricing-toggle {
	background: rgba(255,255,255,0.10) !important;
	border-radius: 999px !important;
	padding: 4px !important;
	display: inline-flex;
}
.pricing-toggle button {
	border-radius: 999px !important;
	padding: 9px 28px !important;
	font-size: 0.87rem !important;
	font-weight: 600 !important;
	color: rgba(255,255,255,0.65) !important;
	background: transparent !important;
	border: none !important;
	transition: background var(--pb-ease), color var(--pb-ease) !important;
}
.pricing-toggle button.active {
	background: rgba(255,255,255,0.18) !important;
	color: #ffffff !important;
}

/* ── Plan / Booster cards ── */
.subscription-plan-card,
.booster-plan-card,
.location-change-plan-card {
	background: #ffffff !important;
	border-radius: var(--pb-radius) !important;
	padding: 32px 24px !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
	border: 1.5px solid rgba(255,255,255,0.06) !important;
	transition: transform var(--pb-ease), box-shadow var(--pb-ease) !important;
}
.subscription-plan-card:hover,
.booster-plan-card:hover,
.location-change-plan-card:hover {
	transform: translateY(-7px) !important;
	box-shadow: 0 20px 52px rgba(0,0,0,0.26) !important;
}

/* Current plan card */
.subscription-plan-card.current-plan,
.booster-plan-card.current-plan,
.location-change-plan-card.current-plan {
	border: 2px solid var(--pb-green) !important;
	box-shadow: 0 8px 32px rgba(34,197,94,0.22) !important;
}

/* ── Plan title ── */
.plan-title,
.booster-plan-title,
.location-change-plan-title {
	font-size: 1.05rem !important;
	font-weight: 800 !important;
	color: var(--pb-dark-1) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.8px !important;
	margin-bottom: 16px !important;
}

/* ── Plan price ── */
.plan-price,
.booster-plan-price,
.location-change-plan-price {
	color: var(--pb-primary) !important;
	margin-bottom: 14px !important;
	font-weight: 800 !important;
}
.plan-price .currency,
.booster-plan-price .currency,
.location-change-plan-price .currency {
	font-size: 1.3rem !important;
	color: var(--pb-primary) !important;
	font-weight: 700 !important;
}
.plan-price .amount,
.booster-plan-price .amount,
.location-change-plan-price .amount {
	font-size: 2.8rem !important;
	font-weight: 800 !important;
	color: var(--pb-primary) !important;
}
.plan-price .duration {
	font-size: 0.95rem !important;
	color: #6b7280 !important;
	font-weight: 400 !important;
}
.booster-plan-period {
	font-size: 0.92rem !important;
	color: #6b7280 !important;
	margin-bottom: 16px !important;
}

/* ── Feature list ── */
.plan-features li,
.booster-plan-features li,
.location-change-plan-features li {
	color: #374151 !important;
	font-size: 0.88rem !important;
	padding: 7px 0 !important;
	border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}
.plan-features li:last-child,
.booster-plan-features li:last-child,
.location-change-plan-features li:last-child {
	border-bottom: none !important;
}
.plan-features li i,
.booster-plan-features li i,
.location-change-plan-features li i {
	color: var(--pb-green) !important;
}

/* ── Current plan badge ── */
.current-plan-badge {
	background: var(--pb-green) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-size: 0.70rem !important;
	font-weight: 700 !important;
	padding: 4px 14px !important;
	letter-spacing: 0.3px;
	margin-bottom: 12px !important;
}

/* ── CTA buttons ── */

/* Base outline button */
.signup-btn,
.boost-btn,
.change-location-btn {
	border-radius: var(--pb-radius-sm) !important;
	font-size: 0.87rem !important;
	font-weight: 700 !important;
	padding: 12px !important;
	letter-spacing: 0.3px;
	border: 2px solid var(--pb-primary) !important;
	color: var(--pb-primary) !important;
	background: #fff !important;
	transition: background var(--pb-ease), color var(--pb-ease), transform var(--pb-ease), box-shadow var(--pb-ease) !important;
	text-decoration: none !important;
	display: block;
	text-align: center;
}
.signup-btn:hover,
.boost-btn:hover,
.change-location-btn:hover {
	background: var(--pb-primary) !important;
	color: #fff !important;
}

/* Highlighted/featured button */
.signup-btn.highlighted,
.boost-btn.highlighted,
.change-location-btn.highlighted {
	background: linear-gradient(135deg, var(--pb-primary), #ff4560) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 4px 16px rgba(225,11,45,0.30) !important;
}
.signup-btn.highlighted:hover,
.boost-btn.highlighted:hover,
.change-location-btn.highlighted:hover {
	box-shadow: 0 6px 24px rgba(225,11,45,0.45) !important;
	transform: translateY(-2px) !important;
}

/* Active / subscribed plan button */
.signup-btn.active-plan,
.boost-btn.active-plan,
.change-location-btn.active-plan {
	background: linear-gradient(135deg, #16a34a, var(--pb-green)) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 4px 14px rgba(34,197,94,0.28) !important;
	cursor: default !important;
}
.signup-btn.active-plan:hover,
.boost-btn.active-plan:hover,
.change-location-btn.active-plan:hover {
	transform: none !important;
}

/* Alert info inside cards (e.g. boosted timer) */
.booster-plan-card .alert-info,
.subscription-plan-card .alert-info,
.location-change-plan-card .alert-info {
	background: rgba(59,130,246,0.10) !important;
	border-color: rgba(59,130,246,0.30) !important;
	color: #1e3a5f !important;
	border-radius: var(--pb-radius-sm) !important;
	font-size: 0.82rem !important;
}

/* Session banners below cards */
.subscription-plans-container .alert,
.booster-plans-container .alert {
	border-radius: var(--pb-radius-sm) !important;
	font-size: 0.90rem;
}

/* ============================================================
   PLAN TRANSACTION PAGE (.lw-credit-balance area)
   ============================================================ */
.lw-credit-balance {
	border: none !important;
	background: transparent !important;
	padding: 20px 12px 12px !important;
	margin-bottom: 16px !important;
}
.lw-credit-balance h2 {
	font-weight: 700 !important;
	color: #374151 !important;
	font-size: 1.2rem !important;
}
.lw-credit-balance h1.text-primary {
	font-weight: 800 !important;
	font-size: 2rem !important;
}
.lw-credit-balance p.text-success {
	font-weight: 700 !important;
}

/* Payment options wrapper – centred column, never wider than viewport */
#lwPaymentOption {
	width: 100% !important;
	max-width: 440px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 0 !important;
	margin-bottom: 80px !important;
	padding: 0 8px !important;
	box-sizing: border-box !important;
}
/* PayPal SDK container – override the fixed 400px from custom.css */
#paypal-button-container {
	width: 100% !important;
	max-width: 400px !important;
	margin: 0 auto 12px !important;
	box-sizing: border-box !important;
}

/* Payment buttons – soft card look, always full-width inside the centred column */
.lw-payment-checkout-btn {
	width: 100% !important;
	max-width: 400px !important;
	margin: 0 auto 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	border-radius: var(--pb-radius-sm) !important;
	border: 1.5px solid rgba(0,0,0,0.09) !important;
	background: #fff !important;
	box-shadow: 0 3px 10px rgba(0,0,0,0.08) !important;
	padding: 10px 20px !important;
	transition: box-shadow var(--pb-ease), transform var(--pb-ease) !important;
}
.lw-payment-checkout-btn:hover {
	box-shadow: 0 6px 20px rgba(0,0,0,0.14) !important;
	transform: translateY(-1px) !important;
}

/* Crypto pay button */
.lw-crypto-pay-button {
	width: 100% !important;
	max-width: 400px !important;
	margin: 0 auto 12px !important;
	box-sizing: border-box !important;
}

/* Payment images inside buttons – never overflow */
.lw-payment-img {
	max-width: 100% !important;
	height: 36px !important;
	object-fit: contain !important;
	vertical-align: middle;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
	.subscription-plans-container,
	.booster-plans-container {
		padding: 32px 12px 48px !important;
	}
	.subscription-plan-card,
	.booster-plan-card,
	.location-change-plan-card {
		padding: 24px 18px !important;
	}
	.plan-price .amount,
	.booster-plan-price .amount,
	.location-change-plan-price .amount {
		font-size: 2.2rem !important;
	}

	/* Transaction page mobile fixes */
	#lwPaymentOption {
		padding: 0 4px !important;
	}
	.lw-payment-checkout-btn,
	#paypal-button-container,
	.lw-crypto-pay-button {
		max-width: 100% !important;
	}
	.lw-payment-img {
		height: 30px !important;
	}
}