/*==================================================
 Bareilly Taxi ERP V9
 Premium Fare Calculator
 Part : 1
 File : assets/css/fare-calculator.css
==================================================*/

.bt-fare-v9{

	position:relative;

	padding:110px 0;

	background:#ffffff;

	overflow:hidden;

}

.bt-fare-v9::before{

	content:"";

	position:absolute;

	width:550px;

	height:550px;

	top:-250px;

	right:-220px;

	border-radius:50%;

	background:rgba(37,99,235,.05);

}

.bt-fare-v9::after{

	content:"";

	position:absolute;

	width:450px;

	height:450px;

	left:-180px;

	bottom:-180px;

	border-radius:50%;

	background:rgba(245,158,11,.08);

}

.bt-fare-v9 .bt-container{

	position:relative;

	z-index:5;

	max-width:1300px;

	margin:auto;

	padding:0 20px;

}

.bt-fare-header{

	text-align:center;

	margin-bottom:60px;

}

.bt-fare-header h2{

	margin:0;

	font-size:48px;

	font-weight:800;

	color:#0f172a;

	line-height:1.2;

}

.bt-fare-header p{

	max-width:760px;

	margin:20px auto 0;

	font-size:18px;

	line-height:32px;

	color:#64748b;

}

.bt-fare-wrapper{

	display:grid;

	grid-template-columns:2fr 1fr;

	gap:40px;

	align-items:start;

}

.bt-fare-form{

	background:#ffffff;

	padding:40px;

	border-radius:30px;

	box-shadow:0 20px 60px rgba(15,23,42,.08);

}

.bt-fare-grid{

	display:grid;

	grid-template-columns:repeat(2,1fr);

	gap:24px;

}

.bt-fare-group{

	display:flex;

	flex-direction:column;

}

.bt-fare-group label{

	margin-bottom:10px;

	font-size:15px;

	font-weight:700;

	color:#334155;

}

.bt-fare-group input,

.bt-fare-group select{

	width:100%;

	height:58px;

	padding:0 18px;

	border:1px solid #dbe4ee;

	border-radius:14px;

	background:#fff;

	font-size:15px;

	color:#334155;

	outline:none;

	transition:.3s;

}

.bt-fare-group input:focus,

.bt-fare-group select:focus{

	border-color:#2563eb;

	box-shadow:0 0 0 4px rgba(37,99,235,.10);

}/*==================================================
 ACTION BUTTONS
==================================================*/

.bt-fare-actions{

	display:flex;

	flex-wrap:wrap;

	gap:18px;

	margin-top:35px;

}

.bt-fare-btn,

.bt-fare-reset{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	min-width:200px;

	height:58px;

	padding:0 30px;

	border:none;

	border-radius:14px;

	font-size:16px;

	font-weight:700;

	cursor:pointer;

	transition:.35s;

}

.bt-fare-btn{

	background:#f59e0b;

	color:#ffffff;

	box-shadow:0 18px 40px rgba(245,158,11,.30);

}

.bt-fare-btn:hover{

	background:#d97706;

	transform:translateY(-4px);

}

.bt-fare-reset{

	background:#e2e8f0;

	color:#334155;

}

.bt-fare-reset:hover{

	background:#cbd5e1;

	transform:translateY(-4px);

}

/*==================================================
 RESULT CARD
==================================================*/

.bt-fare-result{

	display:flex;

	flex-direction:column;

	gap:25px;

}

.bt-result-card{

	background:#0f172a;

	color:#ffffff;

	padding:35px;

	border-radius:28px;

	box-shadow:0 25px 60px rgba(15,23,42,.25);

	position:relative;

	overflow:hidden;

}

.bt-result-card::before{

	content:"";

	position:absolute;

	width:220px;

	height:220px;

	top:-100px;

	right:-100px;

	border-radius:50%;

	background:rgba(255,255,255,.08);

}

.bt-result-badge{

	display:inline-block;

	padding:10px 18px;

	background:#f59e0b;

	border-radius:50px;

	font-size:13px;

	font-weight:700;

	text-transform:uppercase;

	letter-spacing:.5px;

	margin-bottom:20px;

}

.bt-result-card h3{

	margin:0;

	font-size:52px;

	font-weight:800;

	color:#ffffff;

}

.bt-result-card p{

	margin:20px 0 30px;

	line-height:28px;

	color:#cbd5e1;

	font-size:15px;

}

/*==================================================
 FARE BREAKDOWN
==================================================*/

.bt-result-breakdown{

	display:flex;

	flex-direction:column;

	gap:15px;

}

.bt-break-row{

	display:flex;

	align-items:center;

	justify-content:space-between;

	padding:14px 0;

	border-bottom:1px solid rgba(255,255,255,.12);

}

.bt-break-row:last-child{

	border-bottom:none;

}

.bt-break-row span{

	font-size:15px;

	color:#cbd5e1;

}

.bt-break-row strong{

	font-size:17px;

	font-weight:700;

	color:#ffffff;

}

.bt-total-row{

	margin-top:8px;

	padding-top:20px;

	border-top:2px solid rgba(255,255,255,.20);

}

.bt-total-row strong{

	font-size:26px;

	color:#fbbf24;

}/*==================================================
 RESULT BUTTONS
==================================================*/

.bt-result-buttons{

	display:flex;

	flex-wrap:wrap;

	gap:15px;

	margin-top:35px;

}

.bt-result-book,

.bt-result-whatsapp{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	flex:1;

	min-height:56px;

	padding:0 20px;

	border-radius:14px;

	text-decoration:none;

	font-size:16px;

	font-weight:700;

	transition:.35s;

}

.bt-result-book{

	background:#f59e0b;

	color:#ffffff;

	box-shadow:0 18px 40px rgba(245,158,11,.30);

}

.bt-result-book:hover{

	background:#d97706;

	color:#ffffff;

	transform:translateY(-4px);

}

.bt-result-whatsapp{

	background:#22c55e;

	color:#ffffff;

	box-shadow:0 18px 40px rgba(34,197,94,.28);

}

.bt-result-whatsapp:hover{

	background:#16a34a;

	color:#ffffff;

	transform:translateY(-4px);

}

/*==================================================
 INFORMATION CARD
==================================================*/

.bt-fare-info{

	background:#ffffff;

	padding:30px;

	border-radius:24px;

	box-shadow:0 18px 45px rgba(15,23,42,.08);

}

.bt-fare-info h4{

	margin:0 0 20px;

	font-size:24px;

	font-weight:800;

	color:#0f172a;

}

.bt-fare-info ul{

	margin:0;

	padding:0;

	list-style:none;

}

.bt-fare-info li{

	padding:12px 0;

	border-bottom:1px solid #e5e7eb;

	font-size:15px;

	font-weight:600;

	color:#475569;

}

.bt-fare-info li:last-child{

	border-bottom:none;

}

/*==================================================
 BOTTOM BAR
==================================================*/

.bt-fare-bottom-bar{

	margin-top:60px;

	display:grid;

	grid-template-columns:repeat(4,1fr);

	gap:25px;

}

.bt-fare-bottom-item{

	background:#ffffff;

	padding:28px 20px;

	text-align:center;

	border-radius:22px;

	box-shadow:0 18px 45px rgba(15,23,42,.08);

}

.bt-fare-bottom-item strong{

	display:block;

	margin-bottom:8px;

	font-size:24px;

	font-weight:800;

	color:#f59e0b;

}

.bt-fare-bottom-item span{

	display:block;

	font-size:15px;

	font-weight:600;

	color:#64748b;

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

@media (max-width:1200px){

	.bt-fare-wrapper{

		grid-template-columns:1fr;

	}

	.bt-result-card{

		max-width:700px;

		margin:auto;

	}

	.bt-fare-info{

		max-width:700px;

		margin:auto;

	}

}

@media (max-width:991px){

	.bt-fare-v9{

		padding:80px 0;

	}

	.bt-fare-header h2{

		font-size:38px;

	}

	.bt-fare-grid{

		grid-template-columns:1fr;

	}

	.bt-fare-bottom-bar{

		grid-template-columns:repeat(2,1fr);

	}

	.bt-fare-actions{

		justify-content:center;

	}

	.bt-result-buttons{

		flex-direction:column;

	}

}

@media (max-width:767px){

	.bt-fare-form{

		padding:28px 20px;

		border-radius:20px;

	}

	.bt-fare-header h2{

		font-size:32px;

	}

	.bt-fare-header p{

		font-size:16px;

		line-height:28px;

	}

	.bt-fare-btn,

	.bt-fare-reset{

		width:100%;

		min-width:100%;

	}

	.bt-fare-actions{

		flex-direction:column;

	}

	.bt-result-card{

		padding:28px 20px;

	}

	.bt-result-card h3{

		font-size:40px;

	}

	.bt-break-row{

		font-size:14px;

	}

}

@media (max-width:576px){

	.bt-fare-v9{

		padding:60px 0;

	}

	.bt-fare-header{

		margin-bottom:40px;

	}

	.bt-fare-header h2{

		font-size:28px;

	}

	.bt-fare-bottom-bar{

		grid-template-columns:1fr;

		gap:18px;

	}

	.bt-fare-bottom-item{

		padding:22px 18px;

	}

	.bt-fare-bottom-item strong{

		font-size:22px;

	}

	.bt-fare-info{

		padding:24px 18px;

		border-radius:18px;

	}

	.bt-result-book,

	.bt-result-whatsapp{

		width:100%;

	}

}