/* ============================================================
   Change Location Pages – Modern UI overrides (CSS-only)
   Covers:
     1. .lw-change-location-page  (map / city input form)
     2. .location-change-plans-container  (paid plans)
   No functionality affected – all IDs and JS hooks untouched.
   ============================================================ */

/* ── Shared tokens ── */
:root {
	--cl-primary:   var(--lw-primary-color, #e10b2d);
	--cl-dark-1:    #1a1a2e;
	--cl-dark-2:    #16213e;
	--cl-dark-3:    #0f3460;
	--cl-surface:   #f4f5f8;
	--cl-card:      #ffffff;
	--cl-border:    rgba(0,0,0,0.07);
	--cl-radius:    16px;
	--cl-radius-sm: 10px;
	--cl-shadow:    0 8px 28px rgba(0,0,0,0.10);
	--cl-ease:      0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================================
   1. CHANGE LOCATION FORM PAGE
   ============================================================ */

/* Page background */
.lw-change-location-page .lw-change-location-page-wrapper,
body.lw-change-location-page #content,
.lw-change-location-page {
	background: var(--cl-surface) !important;
}

/* Outer container */
.lw-change-location-page.container-fluid,
body.lw-change-location-page .container-fluid.lw-change-location-page {
	padding-top: 24px !important;
	padding-bottom: 40px !important;
	background: var(--cl-surface);
}

/* Card */
.lw-change-location-page .card {
	border: none !important;
	border-radius: var(--cl-radius) !important;
	box-shadow: var(--cl-shadow) !important;
	overflow: hidden;
}

/* Card header bar – dark gradient across the top */
.lw-change-location-page .card .card-body {
	padding: 0 !important;
}

/* Title section inside card body */
.lw-change-location-page .card .card-body > .d-flex:first-child,
.lw-change-location-page .card .card-body > div:first-child {
	background: linear-gradient(135deg, var(--cl-dark-1), var(--cl-dark-2) 60%, var(--cl-dark-3));
	padding: 24px 28px 22px !important;
}

.lw-change-location-page .card .card-body h3 {
	color: #ffffff !important;
	font-weight: 700;
	font-size: 1.25rem;
	margin-bottom: 4px !important;
}

/* Scope subtitle + button white text ONLY to the dark header row */
.lw-change-location-page .card .card-body > .d-flex:first-child .text-muted,
.lw-change-location-page .card .card-body > div:first-child > .mr-3 .text-muted {
	color: rgba(255,255,255,0.72) !important;
}

/* Ensure all text in the form area is dark (overrides any cascade) */
.lw-change-location-page #lwChangeLocationAutoBlock,
.lw-change-location-page #lwChangeLocationAutoBlock *:not(button):not(.btn),
.lw-change-location-page #lwChangeLocationManualBlock,
.lw-change-location-page #lwChangeLocationManualBlock *:not(button):not(.btn) {
	color: #1f2937;
}
.lw-change-location-page #lwChangeLocationAutoBlock label,
.lw-change-location-page #lwChangeLocationManualBlock label {
	color: #6b7280 !important;
}
.lw-change-location-page #lwChangeLocationAutoBlock .text-muted,
.lw-change-location-page #lwChangeLocationAutoBlock small.text-muted,
.lw-change-location-page #lwChangeLocationManualBlock .text-muted,
.lw-change-location-page #lwChangeLocationManualBlock small.text-muted {
	color: #9ca3af !important;
}

/* Back to Profile button */
.lw-change-location-page .card .card-body .btn-outline-secondary {
	background: rgba(255,255,255,0.12) !important;
	border-color: rgba(255,255,255,0.30) !important;
	color: #ffffff !important;
	border-radius: var(--cl-radius-sm) !important;
	font-size: 0.82rem !important;
	transition: background var(--cl-ease), border-color var(--cl-ease);
}
.lw-change-location-page .card .card-body .btn-outline-secondary:hover {
	background: rgba(255,255,255,0.22) !important;
	border-color: rgba(255,255,255,0.55) !important;
}

/* Alert boxes that sit between the dark title header and the form block */
.lw-change-location-page #lwChangeLocationError,
.lw-change-location-page #lwChangeLocationSuccess {
	margin: 12px 28px 0 !important;
}

/* Form area (below the dark header) */
.lw-change-location-page #lwChangeLocationAutoBlock,
.lw-change-location-page #lwChangeLocationManualBlock {
	padding: 22px 28px 24px;
}

/* Labels */
.lw-change-location-page label {
	font-size: 0.77rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #6b7280;
	margin-bottom: 4px !important;
}

/* Inputs */
.lw-change-location-page .form-control {
	border-radius: var(--cl-radius-sm) !important;
	border: 1.5px solid rgba(0,0,0,0.10) !important;
	background: #f9fafb !important;
	font-size: 0.92rem;
	padding: 9px 14px !important;
	transition: border-color var(--cl-ease), box-shadow var(--cl-ease);
}
.lw-change-location-page .form-control:focus {
	border-color: var(--cl-primary) !important;
	box-shadow: 0 0 0 3px rgba(var(--lw-primary-rgb, 225,11,45), 0.12) !important;
	background: #fff !important;
}

/* Detect my location button */
.lw-change-location-page #lwChangeLocationDetectBtn {
	border-radius: var(--cl-radius-sm) !important;
	border-color: var(--cl-primary) !important;
	color: var(--cl-primary) !important;
	font-size: 0.84rem !important;
	font-weight: 600 !important;
	padding: 7px 16px !important;
	transition: background var(--cl-ease), color var(--cl-ease);
}
.lw-change-location-page #lwChangeLocationDetectBtn:hover {
	background: var(--cl-primary) !important;
	color: #fff !important;
}

/* Save / Submit button */
.lw-change-location-page .btn-primary,
.lw-change-location-page #lwChangeLocationSaveBtn {
	background: linear-gradient(135deg, var(--cl-primary), #ff4560) !important;
	border: none !important;
	border-radius: var(--cl-radius-sm) !important;
	font-weight: 700 !important;
	padding: 10px 28px !important;
	box-shadow: 0 4px 14px rgba(225,11,45,0.30) !important;
	transition: transform var(--cl-ease), box-shadow var(--cl-ease);
}
.lw-change-location-page .btn-primary:hover,
.lw-change-location-page #lwChangeLocationSaveBtn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(225,11,45,0.40) !important;
}

/* Map container – rounded + subtle shadow */
.lw-change-location-page #lwChangeLocationMapContainer {
	border-radius: var(--cl-radius-sm) !important;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

/* Manual block border */
.lw-change-location-page .border.rounded {
	border-color: var(--cl-border) !important;
	border-radius: var(--cl-radius-sm) !important;
	background: #f9fafb;
}

/* Alert boxes */
.lw-change-location-page .alert {
	border-radius: var(--cl-radius-sm) !important;
	font-size: 0.88rem;
	border-left-width: 4px !important;
}
.lw-change-location-page .alert-danger   { border-left-color: #e10b2d !important; }
.lw-change-location-page .alert-success  { border-left-color: #22c55e !important; }
.lw-change-location-page .alert-warning  { border-left-color: #f59e0b !important; }
.lw-change-location-page .alert-info     { border-left-color: #3b82f6 !important; }

/* "Enter manually" link */
.lw-change-location-page .btn-link {
	color: var(--cl-primary) !important;
	font-size: 0.84rem;
}

/* ============================================================
   2. PAID PLANS PAGE
   ============================================================ */

/* Background – replace flat teal with brand dark gradient */
.location-change-plans-container {
	background: linear-gradient(160deg, var(--cl-dark-1) 0%, var(--cl-dark-2) 50%, var(--cl-dark-3) 100%) !important;
	min-height: 100vh !important;
	padding: 48px 20px 56px !important;
}

/* Page header text */
.location-change-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);
}
.location-change-plans-container .page-header p {
	color: rgba(255,255,255,0.72) !important;
	font-size: 1rem !important;
}

/* Plan cards */
.location-change-plan-card {
	background: #ffffff !important;
	border-radius: var(--cl-radius) !important;
	padding: 32px 24px !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.16) !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	transition: transform var(--cl-ease), box-shadow var(--cl-ease) !important;
}
.location-change-plan-card:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 16px 48px rgba(0,0,0,0.24) !important;
}

/* Current plan card highlight */
.location-change-plan-card.current-plan {
	border: 2px solid #22c55e !important;
	box-shadow: 0 8px 32px rgba(34,197,94,0.20) !important;
}

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

/* Plan price */
.location-change-plan-price {
	color: var(--cl-primary) !important;
	margin-bottom: 12px !important;
}
.location-change-plan-price .currency {
	font-size: 1.3rem !important;
	color: var(--cl-primary) !important;
}
.location-change-plan-price .amount {
	font-size: 2.8rem !important;
	font-weight: 800 !important;
	color: var(--cl-primary) !important;
}

/* Feature list items */
.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);
}
.location-change-plan-features li:last-child {
	border-bottom: none;
}
.location-change-plan-features li i {
	color: #22c55e !important;
}

/* Buy Now button */
.change-location-btn {
	border-radius: var(--cl-radius-sm) !important;
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	padding: 12px !important;
	border: 2px solid var(--cl-primary) !important;
	color: var(--cl-primary) !important;
	background: #fff !important;
	transition: background var(--cl-ease), color var(--cl-ease) !important;
}
.change-location-btn:hover {
	background: var(--cl-primary) !important;
	color: #fff !important;
}
.change-location-btn.highlighted {
	background: linear-gradient(135deg, var(--cl-primary), #ff4560) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 4px 16px rgba(225,11,45,0.30) !important;
}
.change-location-btn.highlighted:hover {
	box-shadow: 0 6px 22px rgba(225,11,45,0.45) !important;
	transform: translateY(-1px);
}
.change-location-btn.active-plan {
	background: linear-gradient(135deg, #16a34a, #22c55e) !important;
	color: #fff !important;
	border-color: transparent !important;
	cursor: default;
	box-shadow: 0 4px 14px rgba(34,197,94,0.25) !important;
}
.change-location-btn.active-plan:hover {
	transform: none !important;
}

/* Current plan badge */
.current-plan-badge {
	background: #22c55e !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	padding: 4px 14px !important;
	letter-spacing: 0.3px;
}

/* Session alert banners at the bottom */
.location-change-plans-container .alert {
	border-radius: var(--cl-radius-sm) !important;
	font-size: 0.90rem;
}

/* ============================================================
   3. CHANGE LOCATION TRANSACTION PAGE (payment methods)
   ============================================================ */

/* Credit balance header - consistent styling */
#lwChangeLocationTxnRoot .lw-credit-balance {
	border: none !important;
	background: transparent !important;
	padding: 20px 12px 12px !important;
	margin-bottom: 16px !important;
}

/* Payment options wrapper – centred column, never wider than viewport */
#lwChangeLocationTxnRoot #lwPaymentOption {
	width: 100% !important;
	max-width: 440px !important;
	margin: 0 auto !important;
	padding: 0 8px !important;
	box-sizing: border-box !important;
}

/* PayPal SDK container – override the fixed 400px from custom.css */
#lwChangeLocationTxnRoot #paypal-button-container {
	width: 100% !important;
	max-width: 400px !important;
	margin: 0 auto 12px !important;
	box-sizing: border-box !important;
}

/* Payment buttons */
#lwChangeLocationTxnRoot .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;
}

/* Crypto pay button */
#lwChangeLocationTxnRoot .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 */
#lwChangeLocationTxnRoot .lw-payment-img {
	max-width: 100% !important;
	height: 36px !important;
	object-fit: contain !important;
	vertical-align: middle;
}

/* Bottom clearance for mobile bottom nav */
#lwChangeLocationTxnRoot {
	padding-bottom: 80px;
}

/* ============================================================
   4. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
	.lw-change-location-page .card .card-body > .d-flex:first-child,
	.lw-change-location-page .card .card-body > div:first-child {
		padding: 18px 18px 16px !important;
		flex-direction: column !important;
		gap: 12px;
	}
	.lw-change-location-page #lwChangeLocationAutoBlock,
	.lw-change-location-page #lwChangeLocationManualBlock {
		padding: 16px 18px 20px;
	}
	.location-change-plans-container {
		padding: 32px 12px 40px !important;
	}
	.location-change-plan-card {
		padding: 24px 18px !important;
	}

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