/*

	Theme Name : Crsine Car Wash Booking Template

	Author : Udayraj

	Author URI : https://themeforest.net/user/udayraj

	Description: A default stylesheet for crsine Car Wash Booking template.

*/



.online-booking-inner

{

	position: relative;

	margin-bottom: 50px;

}



.online-booking-inner.packages {

	margin-bottom: 20px;

}



@media (min-width: 768px) {

	.online-booking__top {

		display: flex;

		justify-content: space-between;

		align-items: flex-start;

		flex-direction: row-reverse;

	}

}



.online-booking__count {

	width: 80px;

	height: 80px;

	display: flex;

	justify-content: center;

	align-items: center;

	color: #fff;

	font-size: 20px;

	font-weight: 700;

	background-color: var(--thm-base);

	border-radius: 50%;

	margin-bottom: 30px;

}



.online-booking__extra {

	position: relative;

}



.online-booking__extra-item {

	background-color: var(--thm-gray);

	margin-bottom: 10px;

	padding: 30px;

}



@media (min-width: 768px) {

	.online-booking__extra-item {

		display: flex;

		align-items: center;

	}

}



@media (min-width: 992px) {

	.online-booking__extra-item {

		padding-left: 50px;

		padding-right: 50px;

	}

}



.online-booking__extra-title {

	margin: 0;

	color: var(--thm-black);

	font-size: 20px;

	font-weight: 700;

}



.online-booking__extra-title a {

	color: inherit;

	transition: all 500ms ease;

}



.online-booking__extra-title a:hover {

	color: var(--thm-primary);

}



.online-booking__extra-list {

	display: flex;

	align-items: center;

	flex-wrap: wrap;

	margin-top: 10px;

	margin-bottom: 0;

}



@media (min-width: 768px) {

	.online-booking__extra-list {

		margin-top: 0;

		margin-left: auto;

	}

}



.online-booking__extra-list li {

	display: flex;

	align-items: center;

	font-size: 15px;

	color: var(--thm-color);

	margin-right: 10px;

}



@media (min-width: 768px) {

	.online-booking__extra-list li {

		margin-right: 20px;

	}

}



@media (min-width: 1200px) {

	.online-booking__extra-list li {

		margin-right: 50px;

	}

}



.online-booking__extra-list li > i {

	font-size: 16px;

	color: var(--thm-secondary);

	margin-right: 10px;

}



.online-booking__extra-list li:last-of-type {

	flex: 0 0 100%;

	margin-right: 0;

}



@media (min-width: 768px) {

	.online-booking__extra-list li:last-of-type {

		flex: 0 0 auto;

	}

}



.online-booking__extra-list li .thm-btn {

	margin-top: 10px;

	min-width: 170px;

	text-align: center;

}



@media (min-width: 768px) {

	.online-booking__extra-list li .thm-btn {

		margin-top: 0;

	}

}



.online-booking__extra-list li .thm-btn:hover{

	background-color: var(--thm-black);

	color: #fff;

}



.online-booking__extra-list li .thm-btn.active-btn{

	background-color: #0a8811;

}



.online-booking__summery {

	position: relative;

	margin-bottom: 50px;

}



.online-booking__summery-list{

	position: relative;

	display: flex;

	border-right: 0;

	border-bottom: 0;

	flex-wrap: wrap;

	gap: 10px;

}



.online-booking__summery-list .row {

	--bs-gutter-x: 20px;

	--bs-gutter-y: 20px;

}



.online-booking__summery-list .summery-details-wrapper.not-selected

{

	z-index: 1;

	border: 2px solid #f00;

}





.online-booking__summery-list .summery-details-wrapper {

	position: relative;

	display: flex;

	justify-content: space-between;

	align-items: center;

	padding: 35px 20px;

	border: 2px solid var(--thm-border);

}



.summery-details-wrapper .summery-title {

	margin-bottom: 10px;

}



.online-booking__summery-list .summery-details-wrapper.not-selected .summery-title,

.online-booking__summery-list .summery-details-wrapper.not-selected .summery-value,

.online-booking__summery-list .summery-details-wrapper.not-selected .summery-icon

{

	color: #f00;

}



.summery-details-wrapper .summery-currency,

.summery-details-wrapper .summery-value { 

	color: var(--thm-base);

	font-size: 18px;

}



.summery-details-wrapper .summery-icon {

	color: var(--thm-primary);

	font-size: 48px;

	padding-left: 10px;

}



.online-booking__form textarea {

	height: 140px !important;

}



/* Error and Success Section */



.booking-info {

	position: relative;

	display: flex;

	align-items: center;

	padding: 20px 40px;

	margin-top: 50px;

	border: 3px solid;

	font-size: 20px;

}



.booking-info .info-icon {

	font-size: 78px;

	margin-right: 40px;

}



.booking-info ul {

	margin-bottom: 0;

}

.booking-info ul li {

	font-size: 20px;

}



/* Points / Branches */



.branches-seciton {

	position: relative;

}



.branch-card {

	position: relative;

	background-color: var(--thm-gray);

	padding: 30px 30px 40px;

	margin-bottom: 30px;

	border-top: 4px solid var(--thm-primary);

}



.branch-card .branch-title {

	position: relative;

	margin: 0;

	display: inline-block;

	font-size: 20px;

	font-weight: 700;

	color: var(--thm-black);

	padding-left: 0px;

	margin-bottom: 25px;

	max-width: calc(100% - 45px);

	word-break: break-word;

}



.branch-card .branch-title:after{

	position: absolute;

	content: '';

	width: 35px;

	height: 2px;

	background-color: var(--thm-secondary);

	right: -45px;

	top: 50%;

	transform: translateY(-50%);

}



.branch-details ul {	

	position: relative;

}



.branch-details ul li {

	display: flex;

	align-items: center;

	word-break: break-word;

	font-size: 17px;

}



.branch-details ul li + li {



	margin-top: 20px;

}



.branch-details ul li i{

	font-size: 20px;

	padding-right: 15px;

	color: var(--thm-primary);

}



.branch-details-bottom {

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	margin-top: 25px;

}