/* ─── PRICING PAGE STYLES ─── */
.pricing-page {
	background-color: var(--gray-50);
}

/* ─── PRICING HERO ─── */
.pricing-hero {
	text-align: center;
	padding: 100px 24px 80px;
	background: radial-gradient(circle at 70% 30%, #162442 0%, var(--navy-main) 70%);
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--navy-border);
}
.pricing-hero::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-image: radial-gradient(rgba(245, 158, 11, 0.07) 1px, transparent 1px);
	background-size: 32px 32px;
	pointer-events: none;
}
.pricing-hero-eyebrow, .pricing-hero-title, .pricing-hero-sub, .billing-toggle-wrapper {
	position: relative;
	z-index: 2;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
.pricing-hero-eyebrow {
	display: inline-block;
	font-family: 'Noto Nastaliq Urdu', serif;
	font-size: 14px;
	color: var(--amber-hover);
	background: rgba(245, 158, 11, 0.15);
	border: 1px solid rgba(245, 158, 11, 0.25);
	border-radius: 30px;
	padding: 4px 18px;
	margin-bottom: 20px;
	font-weight: 700;
}
.pricing-hero-title {
	font-family: 'Noto Nastaliq Urdu', serif;
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 700;
	color: var(--white);
	margin-bottom: 20px;
	line-height: 1.5;
}
.pricing-hero-sub {
	font-family: 'Noto Nastaliq Urdu', serif;
	font-size: 16px;
	color: var(--gray-400);
	line-height: 2.2;
	margin-bottom: 40px;
}

/* ─── BILLING TOGGLE ─── */
.billing-toggle-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 60px;
}
.toggle-label {
	font-family: 'Noto Nastaliq Urdu', serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--gray-400);
	cursor: pointer;
	transition: color 0.3s ease;
}
.toggle-label.active {
	color: var(--white);
}
.save-badge {
	color: var(--amber-hover);
	background: var(--amber-light);
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 13px;
	font-family: 'Noto Nastaliq Urdu', serif;
	margin-right: 8px;
	font-weight: 700;
}
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 32px;
}
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.slider {
	position: absolute;
	cursor: pointer;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: #cbd5e1;
	transition: .4s;
	border-radius: 34px;
}
.slider:before {
	position: absolute;
	content: "";
	height: 24px;
	width: 24px;
	left: 4px; /* Default LTR to the left, inside RTL this physically sits on the left side of the gray bar until toggled */
	bottom: 4px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}
/* In RTL, the "left: 4px" places the dot visually on the left.
   If true RTL reverses the physical coords, we may need to use html[dir="rtl"] overrides, 
   but typically absolute left/right stay physical. 
   To toggle it RTL smoothly, we change transform. */
input:checked + .slider {
	background-color: var(--navy-deep);
}
html[dir="rtl"] input:checked + .slider:before {
	transform: translateX(-28px);
}
html:not([dir="rtl"]) input:checked + .slider:before {
	transform: translateX(28px);
}

/* ─── PRICING CARDS ─── */
.pricing-cards-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 80px;
}
.plan-card {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: 24px;
	padding: 40px 32px;
	position: relative;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.plan-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}
.plan-card.business {
	border: 2px solid var(--amber);
	box-shadow: 0 16px 36px rgba(0,0,0,0.08);
}
.plan-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--amber);
	color: var(--navy-deep);
	font-family: 'Noto Nastaliq Urdu', serif;
	font-size: 13px;
	font-weight: 700;
	padding: 6px 16px;
	border-radius: 20px;
	white-space: nowrap;
}
.plan-header {
	margin-bottom: 24px;
}
.plan-name {
	font-family: 'Noto Nastaliq Urdu', serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--navy-deep);
	margin-bottom: 4px;
}
.plan-name-eng {
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	color: var(--amber-hover);
	font-weight: 600;
	margin-bottom: 12px;
}
.plan-tagline {
	font-family: 'Noto Nastaliq Urdu', serif;
	font-size: 14px;
	color: var(--gray-600);
	line-height: 2;
}
.plan-price {
	margin-bottom: 24px;
	min-height: 60px;
}
.price-value {
	font-family: 'Inter', sans-serif; /* Western Digits block */
	font-size: 32px;
	font-weight: 800;
	color: var(--navy-deep);
}
.price-period {
	font-family: 'Noto Nastaliq Urdu', serif;
	font-size: 14px;
	color: var(--gray-600);
}
.price-note {
	font-family: 'Noto Nastaliq Urdu', serif;
	font-size: 12px;
	color: var(--gray-400);
	margin-top: 4px;
	display: block;
}

/* Features List */
.plan-features {
	list-style: none;
	padding: 0;
	margin: 0 0 32px 0;
	flex-grow: 1;
}
.plan-features li {
	display: flex;
	align-items: flex-start; /* top align checkmarks with text */
	gap: 12px;
	font-family: 'Noto Nastaliq Urdu', serif;
	font-size: 14px;
	color: var(--gray-800);
	line-height: 1.8;
	margin-bottom: 16px;
}
.feature-check {
	color: var(--green);
	font-size: 16px;
	margin-top: 2px;
	flex-shrink: 0;
}
/* In true RTL, icon order is swapped natively if we use gap/flex. The icon will sit on right side of text. */

.plan-cta {
	display: block;
	text-align: center;
	padding: 14px 0;
	border-radius: 12px;
	font-family: 'Noto Nastaliq Urdu', serif;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.3s ease;
}
.plan-cta.primary {
	background: var(--navy-deep);
	color: var(--white);
}
.plan-cta.primary:hover {
	background: var(--amber);
	color: var(--navy-deep);
}
.plan-cta.amber {
	background: var(--amber);
	color: var(--navy-deep);
}
.plan-cta.amber:hover {
	background: var(--navy-deep);
	color: var(--white);
}

/* ─── COMPARISON TABLE ─── */
.comparison-section {
	padding: 80px 24px;
	background: var(--white);
}
.comparison-container {
	max-width: 1000px;
	margin: 0 auto;
}
.comparison-title {
	font-family: 'Noto Nastaliq Urdu', serif;
	font-size: 32px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 40px;
	color: var(--navy-deep);
}
.comp-table-wrapper {
	overflow-x: auto;
}
.comp-table {
	width: 100%;
	border-collapse: collapse;
	text-align: right;
}
.comp-table th, .comp-table td {
	padding: 20px;
	border-bottom: 1px solid var(--gray-200);
}
.comp-table th {
	font-family: 'Noto Nastaliq Urdu', serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--navy-deep);
	background: var(--gray-50);
}
.comp-table td {
	font-family: 'Noto Nastaliq Urdu', serif; /* Falling back to Noto Naskh isn't needed unless tested, default is legible with good padding */
	font-size: 15px;
	color: var(--gray-800);
}
.comp-table th.col-feature { width: 40%; }
.comp-table th.col-plan { width: 20%; text-align: center; }
.comp-table td.col-plan { text-align: center; }

.check-icon {
	color: var(--green);
	font-weight: bold;
	font-size: 18px;
}
.dash-icon {
	color: var(--gray-400);
	font-weight: bold;
}

/* ─── FAQ ─── */
.faq-section {
	padding: 80px 24px;
	background: var(--gray-50);
}
.faq-container {
	max-width: 800px;
	margin: 0 auto;
}
.faq-title {
	font-family: 'Noto Nastaliq Urdu', serif;
	font-size: 32px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 40px;
	color: var(--navy-deep);
}
.faq-item {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: 12px;
	margin-bottom: 16px;
	overflow: hidden;
}
.faq-question {
	width: 100%;
	text-align: right; /* Default for RTL */
	padding: 24px;
	background: none;
	border: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: 'Noto Nastaliq Urdu', serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--navy-deep);
	cursor: pointer;
}
html[dir="rtl"] .faq-question {
	text-align: right;
}
.faq-icon {
	color: var(--amber-hover);
	transition: transform 0.3s ease;
	font-size: 24px;
	line-height: 1;
}
.faq-item.active .faq-icon {
	transform: rotate(45deg);
}
.faq-answer {
	display: none;
	padding: 0 24px 24px;
	font-family: 'Noto Nastaliq Urdu', serif;
	font-size: 15px;
	color: var(--gray-600);
	line-height: 2.2;
}
.faq-item.active .faq-answer {
	display: block;
}

/* ─── CTA BANNER ─── */
.pricing-cta-banner {
	background: radial-gradient(circle at 50% 0%, #162848 0%, var(--navy-deep) 100%);
	padding: 80px 24px;
	text-align: center;
	color: var(--white);
}
.pricing-cta-title {
	font-family: 'Noto Nastaliq Urdu', serif;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	margin-bottom: 32px;
	line-height: 1.5;
}

/* Responsive */
@media (max-width: 991px) {
	.pricing-cards-container {
		grid-template-columns: 1fr;
		max-width: 500px;
	}
	.plan-card.business {
		/* Visual prominence on mobile: slightly larger padding and font */
		transform: scale(1.02);
	}
	.comp-table th, .comp-table td {
		padding: 12px;
		font-size: 14px;
	}
}
@media (max-width: 576px) {
	.plan-card.business {
		transform: scale(1);
	}
}