/* ============================================
   Pricing Page Styles
   ============================================ */

/* --- Pricing Hero --- */
.pricing-hero {
	position: relative;
	width: 100%;
	background: linear-gradient(180deg, #f0f5ff 0%, #ffffff 100%);
	padding: 160px 20px 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	/* overflow: hidden; */
}

.pricing-bg-left {
    position: absolute;
    bottom: 0;
    left: -7%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
    height: 100%;
    top: 32%;
}

.pricing-hero-title {
	font-family: 'Manrope', sans-serif;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
	color: #0f172a;
	margin: 0 0 55px;
	position: relative;
	z-index: 1;
}

.pricing-hero-subtitle {
	font-family: 'Manrope', sans-serif;
	font-size: 20px;
	line-height: 1.6;
	color: #64748b;
	margin: 0 0 36px;
	position: relative;
	z-index: 1;
}

/* --- Billing Toggle --- */
.pricing-toggle {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 40px;
	position: relative;
	z-index: 1;
}

.pricing-toggle-pills {
	display: flex;
	align-items: center;
	background: #f1f5f9;
	border-radius: 50px;
	padding: 5px;
	border: 1px solid #D5E5FA;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.pricing-toggle-pill {
	padding: 12px 32px;
	border: none;
	border-radius: 50px;
	font-family: 'Manrope', sans-serif;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	background: transparent;
	color: #64748b;
	white-space: nowrap;
	position: relative;
}

.pricing-toggle-pill.active {
	background: #155dfc;
	color: #fff;
	box-shadow: 0 2px 8px rgba(21, 93, 252, 0.3);
}

.pricing-toggle-pill:not(.active):hover {
	color: #0f172a;
}

.pricing-save-badge {
	position: absolute;
	top: -10px;
	right: -10px;
	font-family: 'Manrope', sans-serif;
	font-size: 10px;
	font-weight: 700;
	color: #fff;
	background: #22c55e;
	border-radius: 20px;
	padding: 3px 8px;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(34, 197, 94, 0.35);
	pointer-events: none;
}

/* --- Profile Slider --- */
.pricing-slider-section {
	width: 100%;
	max-width: 600px;
	margin-bottom: 25px;
	position: relative;
	z-index: 1;
}

.pricing-slider-title {
	font-family: 'Manrope', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 20px;
	text-align: center;
}

.pricing-slider-wrapper {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pricing-slider-min {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #334155;
	min-width: 32px;
	text-align: center;
}

.pricing-slider-max {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #334155;
	min-width: 32px;
	text-align: center;
}

.custom-slider {
	flex: 1;
	position: relative;
	height: 48px;
	cursor: pointer;
	display: flex;
	align-items: center;
	-webkit-user-select: none;
	user-select: none;
	touch-action: none;
}

.custom-slider-track {
	width: 100%;
	height: 8px;
	border-radius: 100px;
	background: #e2e8f0;
	position: relative;
	overflow: visible;
}

.custom-slider-fill {
	height: 100%;
	background: linear-gradient(90deg, #155dfc, #3b82f6);
	border-radius: 100px;
	width: 0%;
	transition: width 0.08s ease-out;
}

.custom-slider-thumb {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #155dfc;
	border: 3px solid #fff;
	box-shadow: 0 2px 10px rgba(21, 93, 252, 0.35);
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(-50%, -50%);
	transition: left 0.08s ease-out, box-shadow 0.2s, transform 0.15s;
	pointer-events: none;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}

.custom-slider:hover .custom-slider-thumb {
	box-shadow: 0 2px 14px rgba(21, 93, 252, 0.45), 0 0 0 6px rgba(21, 93, 252, 0.08);
	transform: translate(-50%, -50%) scale(1.06);
}

.custom-slider:active .custom-slider-thumb {
	box-shadow: 0 2px 14px rgba(21, 93, 252, 0.5), 0 0 0 10px rgba(21, 93, 252, 0.1);
	transform: translate(-50%, -50%) scale(1.1);
}

/* --- Pricing Card --- */
.pricing-card {
	width: 100%;
	max-width: 900px;
	background: linear-gradient(135deg, #eff6ff 0%, #f8faff 100%);
	border: 2px solid var(--dark-main, #101828);
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 24px;
	box-shadow: 0px 2px 4px -2px #0000001A;
	position: relative;
	z-index: 1;

box-shadow: 0px 4px 6px -1px #0000001A;

}
.pricing-card-left {
    background: #EFF6FF;
    border-radius: 16px 0 0 16px;
}
.pricing-card-left {
	flex-shrink: 0;
}

.pricing-card-left , .pricing-card-right	{
padding: 44px 48px;
}	



.pricing-card-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 10px;
}

.pricing-amount {
	font-family: 'Manrope', sans-serif;
	font-size: 40px;
	font-weight: 800;
	color: #155dfc;
	line-height: 1;
	white-space: nowrap;
}

.pricing-period {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	color: #64748b;
	font-weight: 500;
}

.pricing-card-desc {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	color: #64748b;
	margin: 0 0 20px;
	line-height: 1.5;
}

.pricing-card-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	background: #155dfc;
	color: #fff;
	border: none;
	border-radius: 10px;
	font-family: 'Manrope', sans-serif;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s;
	margin-bottom: 14px;
	width: 100%;
	justify-content: center;
}

.pricing-card-btn img {
	width: 12px;
	height: 12px;
	filter: brightness(10);
}

.pricing-card-btn:hover {
	background: #1249d6;
	transform: translateY(-1px);
}

.pricing-card-per-loc {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #64748b;
	margin: 0;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pricing-card-right {
	flex: 1;
}

.pricing-card-features {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pricing-feature-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	color: #334155;
	font-weight: 600;
	line-height: 1.4;
}

.pricing-check {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.pricing-contact-link {
	font-family: 'Manrope', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #155dfc;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: transform 0.3s ease, font-size 0.3s ease, opacity 0.2s;
	position: relative;
	z-index: 1;
	display: inline-block;
}

.pricing-contact-link.pulse-attention {
	animation: pulseAttention 0.8s ease;
}

@keyframes pulseAttention {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.25); }
	60%  { transform: scale(1.05); }
	100% { transform: scale(1); }
}

.pricing-contact-link:hover {
	opacity: 0.75;
	color: #155dfc;
}

/* --- What's Included Section --- */
.pricing-included-section {
	width: 100%;
background: var(--Blue-BG, #EFF6FF);

	padding: 90px 20px;
}

.pricing-included-inner {
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}

.pricing-included-title {
	font-family: 'Manrope', sans-serif;
	font-size: 36px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 15px;
}

.pricing-included-subtitle {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: #64748b;
	margin: 0 0 48px;
	line-height: 1.6;
}

.pricing-included-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.pricing-included-card {
	background: linear-gradient(260.79deg, #FFFFFF 6.98%, #EFF6FF 93.02%);
	border: 1px solid #101828;
	border-radius: 16px;
	padding: 32px 24px;
	text-align: left;
	transition: box-shadow 0.25s, border-color 0.25s;
}

.pricing-included-card:hover {
	border-color: #c7d2fe;
	box-shadow: 0 6px 24px rgba(21, 93, 252, 0.08);
}

.pricing-included-icon {
	border-radius: 14px;

	margin-bottom: 18px;
}

.pricing-included-icon img{
	width: auto;
}

.pricing-included-card h4 {
	font-family: 'Manrope', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 8px;
}

.pricing-included-card p {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #64748b;
	margin: 0;
	line-height: 1.5;
}

span.bluees {

    color: #155dfc;
  
	font-weight: 700;
}

/* --- Testimonials & CTA use Index.css classes directly --- */

/* --- CTA & Testimonials use Index.css classes directly --- */

/* Ensure FAQ section has proper width inside wrapper */
.repopilot-index133 > .faq-section {
	width: 100%;
}

/* ============================================
   Responsive
   ============================================ */

@media screen and (max-width: 1100px) {
	.pricing-card {
		padding: 36px 32px;
		gap: 30px;
	}

	.pricing-included-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 768px) {
	.pricing-bg-left {
		display: block;
		width: 60%;
		left: -15%;
		top: 0;
		bottom: auto;
	
	}

	.pricing-hero {
		padding: 120px 20px 60px;
	}

	.pricing-hero-title {
		font-size: 36px;
		line-height: 1.15;
	}

	.pricing-hero-subtitle {
		font-size: 16px;
	}

	.pricing-toggle-pill {
		padding: 10px 24px;
		font-size: 14px;
	}
.pricing-save-badge {
    font-size: 12px;
    padding: 2px 7px;
    top: -14px;
    right: -20px;
}
span.bluees {
    font-size: 42px;
    color: #155dfc;
    display: block;
	font-weight: 700;
}
	.pricing-card {
		flex-direction: column;
		padding: 28px 24px;
		gap: 24px;
	}

	.pricing-card-left {
		width: 100%;
		text-align: left;
	}

	.pricing-card-price {
		justify-content: flex-start;
	}

	.pricing-amount {
		font-size: 40px;
	}

	.pricing-card-btn {
		max-width: 100%;
	}

	/* .pricing-card-right {
		width: 100%;
		border-top: 1px solid #e2e8f0;
		padding-top: 20px;
	} */

	.pricing-included-section {
		padding: 60px 20px;
	}

	.pricing-included-title {
		font-size: 28px;
	}

	.pricing-included-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.pricing-card-right {
    padding-top: 10px;
}
}

@media screen and (max-width: 600px) {
.pricing-bg-left {
    width: 475px;
    left: -30%;
    height: 600px;
    top: 5%;
}
	.pricing-hero {
		padding: 80px 16px 50px;
		padding-top: 110px;
	}

	.pricing-hero-title {
		font-size: 36px;
		font-weight: 500;
	}
.pricing-card-left, .pricing-card-right {
    padding: 35px;
}
.pricing-card-right {
    padding-top: 10px;
}
	.pricing-hero-subtitle {
		font-size: 15px;
		margin-bottom: 28px;
	}

	.pricing-toggle {
		gap: 10px;
		margin-bottom: 30px;
	}

	.pricing-toggle-pill {
		padding: 9px 20px;
		font-size: 13px;
	}

	.pricing-slider-title {
		font-size: 28px;
	}

	.pricing-slider-section {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

	.pricing-card {
		padding: 0px;
		gap: 20px;
		max-width: 100%;
	}
.pricing-card-left {

    border-radius: 16px 16px 0px 0px;
}
	.pricing-amount {
		font-size: 36px;
	}

	.pricing-card-desc {
		font-size: 14px;
	}

	.pricing-feature-item {
		font-size: 16px;
	}

	.pricing-included-grid {
		grid-template-columns: 1fr;
	}

	.pricing-included-card {
		padding: 24px 20px;
	}

	.pricing-contact-link {
		font-size: 15px;
	}
}

/* ============================================
   Step 2: Checkout / Billing Form
   ============================================ */
.checkout-wrapper {
	width: 100%;
	max-width: 1000px;
	margin-top: 3p0x;
	position: relative;
	z-index: 1;
	margin-bottom: 24px;
	text-align: left;
}

.checkout-container {
	display: flex;
	align-items: flex-start;
	background: #fff;
	border: 1.5px solid #e2e8f0;
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.06);
	overflow: visible;
}

.checkout-left {
	flex: 1;
	min-width: 0;
	padding: 32px 28px;
	border-right: 1.5px solid #f0f2f5;
}

.checkout-right {
	width: 340px;
	flex-shrink: 0;
	padding: 32px 24px;
	background: #fafbfc;
	border-radius: 0 16px 16px 0;
	position: sticky;
	top: 80px;
}

.checkout-section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Manrope', sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 22px;
}

.checkout-row {
	display: flex;
	gap: 14px;
	margin-bottom: 14px;
}

.checkout-row-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 14px;
}

.checkout-field {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.checkout-field.checkout-full {
	margin-bottom: 14px;
}

.checkout-field label {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #475569;
}

.checkout-field input,
.checkout-field select {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid #e2e8f0;
	border-radius: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #1e293b;
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
	outline: none;
	box-sizing: border-box;
}

.checkout-field input:focus,
.checkout-field select:focus {
	border-color: #155dfc;
	box-shadow: 0 0 0 3px rgba(21,93,252,0.08);
}

.checkout-field input::placeholder {
	color: #94a3b8;
	font-size: 13px;
}

/* GST Toggle */
.checkout-gst-toggle {
	margin: 18px 0 14px;
}

.checkout-gst-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #334155;
}

.checkout-gst-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #155dfc;
	margin-top: 2px;
	flex-shrink: 0;
}

.checkout-gst-fields {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 18px;
	margin-bottom: 14px;
}

.checkout-gst-note {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	color: #3b82f6;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 8px;
	padding: 8px 12px;
	margin-top: 10px;
}

/* Order Summary */
.order-summary-box {
	background: #fff;
	border: 1px solid #e8eaed;
	border-radius: 10px;
	padding: 14px;
	margin-bottom: 18px;
}

.order-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #64748b;
}

.order-row strong {
	color: #1e293b;
	font-weight: 600;
	font-size: 13px;
	text-align: right;
}

.order-price-section {
	margin-bottom: 14px;
}

.order-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Manrope', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 8px;
}

.order-gst-box {
	background: #f0f9ff;
	border: 1px solid #bae6fd;
	border-radius: 8px;
	padding: 8px 12px;
	margin-top: 6px;
}

.order-gst-box .order-row {
	padding: 3px 0;
	font-size: 12px;
}

.order-total-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 0;
	border-top: 2px solid #e2e8f0;
	margin-bottom: 10px;
}

.order-total-label {
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
}

.order-total-amount {
	font-family: 'Manrope', sans-serif;
	font-size: 24px;
	font-weight: 800;
	color: #155dfc;
}

.order-gst-invoice-note {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	color: #16a34a;
	font-weight: 500;
	margin-bottom: 14px;
}

.checkout-pay-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 20px;
	background: linear-gradient(135deg, #16a34a, #15803d);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s;
	margin-bottom: 10px;
}

.checkout-pay-btn:hover {
	background: linear-gradient(135deg, #15803d, #166534);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(22,163,74,0.3);
}

.checkout-pay-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

.checkout-secure-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	color: #9ca3af;
	margin-bottom: 16px;
}

.checkout-trust-badges {
	display: flex;
	gap: 10px;
}

.trust-badge {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #e8eaed;
	border-radius: 8px;
	padding: 10px;
}

.trust-badge svg {
	flex-shrink: 0;
}

.trust-badge div {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.trust-badge strong {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 700;
	color: #1e293b;
	white-space: nowrap;
}

.trust-badge small {
	font-family: 'Inter', sans-serif;
	font-size: 10px;
	color: #94a3b8;
}

/* Toast */
.toast-container {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.toast {
	padding: 12px 20px;
	border-radius: 10px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	animation: toastIn 0.3s ease;
	max-width: 400px;
}

.toast-error {
	background: #ef4444;
}

.toast-success {
	background: #16a34a;
}

.toast-info {
	background: #155dfc;
}

@keyframes toastIn {
	from { opacity: 0; transform: translateX(20px); }
	to { opacity: 1; transform: translateX(0); }
}

/* Responsive checkout */
@media screen and (max-width: 1100px) {
	.checkout-wrapper {
		max-width: 100%;
		padding: 0 10px;
	}
	.checkout-right {
		width: 300px;
	}
}

@media screen and (max-width: 768px) {
	.checkout-container {
		flex-direction: column;
	}
	.checkout-left {
		border-right: none;
		border-bottom: 1.5px solid #f0f2f5;
		padding: 24px 20px;
	}
	.checkout-right {
		width: 100%;
		border-radius: 0 0 16px 16px;
		padding: 24px 20px;
		position: static;
	}
	.checkout-row {
		flex-direction: column;
		gap: 12px;
	}
	.checkout-row-3 {
		grid-template-columns: 1fr;
	}
	.checkout-trust-badges {
		flex-direction: column;
	}
	.order-total-amount {
		font-size: 22px;
	}
}

@media screen and (max-width: 600px) {
	.checkout-left, .checkout-right {
		padding: 20px 16px;
	}
	.checkout-row-3 {
		grid-template-columns: 1fr;
	}
}