/* =========================================================
   TNS PRESTIGE
   MODERN MULTI-STEP BOOKING FORM
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL
--------------------------------------------------------- */

.tns-vr-booking-wrapper {

	width: 100%;
	max-width: 850px;

	margin: 40px auto;

	font-family: "Outfit", sans-serif;

	color: #555;

	box-sizing: border-box;
}


.tns-vr-booking-wrapper *,
.tns-vr-booking-wrapper *::before,
.tns-vr-booking-wrapper *::after {

	box-sizing: border-box;

}


/* ---------------------------------------------------------
   MAIN CARD
--------------------------------------------------------- */

.tns-vr-booking-form {

	width: 100%;

	background: #ffffff;

	border-radius: 12px;

	padding: 48px 56px 40px;

	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.08);

	border: 1px solid #f0f0f0;

}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.tns-vr-form-header {

	text-align: center;

	margin-bottom: 42px;

}


.tns-vr-form-header h2 {

	margin: 0 0 10px;

	font-family: "Outfit", sans-serif;

	font-size: 25px;

	line-height: 1.3;

	font-weight: 600;

	color: #4f5755;

}


.tns-vr-form-header p {

	margin: 0 auto;

	max-width: 600px;

	font-family: "Outfit", sans-serif;

	font-size: 14px;

	line-height: 1.7;

	font-weight: 400;

	color: #929997;

}


/* ---------------------------------------------------------
   PROGRESS WRAPPER
--------------------------------------------------------- */

.tns-vr-progress {

	position: relative;

	display: flex;

	justify-content: space-between;

	align-items: flex-start;

	width: 100%;

	margin: 0 auto 48px;

	padding: 0 5px;

}


/* ---------------------------------------------------------
   PROGRESS TRACK
--------------------------------------------------------- */

.tns-vr-progress-track {

	position: absolute;

	top: 18px;

	left: 12%;

	right: 12%;

	height: 3px;

	background: #e7e8e7;

	z-index: 0;

	border-radius: 20px;

	overflow: hidden;

}


/* Animated fill */

.tns-vr-progress-fill {

	display: block;

	width: 0%;

	height: 100%;

	background: #5bce73;

	border-radius: 20px;

	transition: width 0.4s ease;

}


/* ---------------------------------------------------------
   PROGRESS STEP
--------------------------------------------------------- */

.tns-vr-progress-step {

	position: relative;

	z-index: 2;

	width: 33.333%;

	display: flex;

	flex-direction: column;

	align-items: center;

	text-align: center;

}


/* ---------------------------------------------------------
   CIRCLE
--------------------------------------------------------- */

.tns-vr-step-circle {

	width: 38px;

	height: 38px;

	border-radius: 50%;

	display: flex;

	align-items: center;

	justify-content: center;

	background: #ffffff;

	border: 3px solid #dedfdf;

	color: #aaa;

	font-size: 14px;

	font-weight: 500;

	transition:
		all 0.35s ease;

}


/* Active */

.tns-vr-progress-step.active .tns-vr-step-circle {

	background: #ffffff;

	border-color: #59ce72;

	color: #59c96e;

	box-shadow:
		0 0 0 4px rgba(89, 206, 114, 0.08);

}


/* Completed */

.tns-vr-progress-step.completed .tns-vr-step-circle {

	background: #5bce73;

	border-color: #5bce73;

	color: #ffffff;

}


/* ---------------------------------------------------------
   STEP CHECK
--------------------------------------------------------- */

.tns-vr-step-check {

	display: none;

	font-size: 15px;

	font-weight: 700;

}


.tns-vr-progress-step.completed .tns-vr-step-number {

	display: none;

}


.tns-vr-progress-step.completed .tns-vr-step-check {

	display: inline;

}


/* ---------------------------------------------------------
   STEP LABEL
--------------------------------------------------------- */

.tns-vr-step-label {

	margin-top: 10px;

	font-size: 12px;

	font-weight: 500;

	color: #999;

	transition: color 0.3s ease;

}


.tns-vr-progress-step.active .tns-vr-step-label {

	color: #55c96c;

	font-weight: 600;

}


.tns-vr-progress-step.completed .tns-vr-step-label {

	color: #55c96c;

}


/* ---------------------------------------------------------
   FORM STEP
--------------------------------------------------------- */

.tns-vr-form-step {

	display: none;

	animation:
		tnsVrStepIn 0.35s ease;

}


.tns-vr-form-step.active {

	display: block;

}


@keyframes tnsVrStepIn {

	from {

		opacity: 0;

		transform: translateX(12px);

	}

	to {

		opacity: 1;

		transform: translateX(0);

	}

}


/* ---------------------------------------------------------
   SECTION HEADING
--------------------------------------------------------- */

.tns-vr-section-heading {

	margin-bottom: 18px;

}


.tns-vr-section-heading h3 {

	margin: 0 0 7px;

	font-family: "Outfit", sans-serif;

	font-size: 19px;

	font-weight: 500;

	text-transform: uppercase;

	color: #59615f;

	letter-spacing: 0.2px;

}


.tns-vr-section-heading p {

	margin: 0;

	font-size: 13px;

	line-height: 1.6;

	color: #999f9d;

}


/* ---------------------------------------------------------
   DIVIDER
--------------------------------------------------------- */

.tns-vr-divider {

	width: 100%;

	height: 1px;

	background: #e4e6e5;

	margin-bottom: 32px;

}


/* ---------------------------------------------------------
   FORM ROW
--------------------------------------------------------- */

.tns-vr-form-row {

	display: grid;

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

	gap: 28px;

	margin-bottom: 24px;

}


.tns-vr-form-group.tns-vr-full {

	grid-column: 1 / -1;

}


/* ---------------------------------------------------------
   LABEL
--------------------------------------------------------- */

.tns-vr-form-group label {

	display: block;

	margin-bottom: 9px;

	font-family: "Outfit", sans-serif;

	font-size: 13px;

	font-weight: 500;

	color: #68706e;

}


.tns-vr-form-group label span {

	color: #5bce73;

	margin-left: 2px;

}


/* ---------------------------------------------------------
   INPUT
--------------------------------------------------------- */

.tns-vr-form-group input,
.tns-vr-form-group select,
.tns-vr-form-group textarea {

	width: 100%;

	font-family: "Outfit", sans-serif;

	font-size: 13px;

	font-weight: 400;

	color: #555;

	background: #ffffff;

	border: 1px solid #d7d9d8;

	border-radius: 5px;

	outline: none;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background 0.2s ease;

}


/* Input */

.tns-vr-form-group input,
.tns-vr-form-group select {

	height: 46px;

	padding: 0 14px;

}


/* Textarea */

.tns-vr-form-group textarea {

	min-height: 125px;

	padding: 13px 14px;

	resize: vertical;

	line-height: 1.6;

}


/* Placeholder */

.tns-vr-form-group input::placeholder,
.tns-vr-form-group textarea::placeholder {

	color: #b1b5b3;

	opacity: 1;

}


/* Select */

.tns-vr-form-group select {

	cursor: pointer;

	appearance: auto;

}


/* Focus */

.tns-vr-form-group input:focus,
.tns-vr-form-group select:focus,
.tns-vr-form-group textarea:focus {

	border-color: #5bce73;

	background: #ffffff;

	box-shadow:
		0 0 0 3px rgba(91, 206, 115, 0.09);

}


/* Invalid */

.tns-vr-form-group input.tns-vr-invalid,
.tns-vr-form-group select.tns-vr-invalid,
.tns-vr-form-group textarea.tns-vr-invalid {

	border-color: #e06b6b;

	background: #fffafa;

}


/* ---------------------------------------------------------
   FORM ACTIONS
--------------------------------------------------------- */

.tns-vr-form-actions {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 15px;

	margin-top: 38px;

	padding-top: 26px;

	border-top: 1px solid #eeeeee;

}


/* Step 1 next alignment */

.tns-vr-actions-next {

	justify-content: flex-end;

}


/* ---------------------------------------------------------
   NEXT BUTTON
--------------------------------------------------------- */

.tns-vr-next-button {

	min-width: 105px;

	height: 43px;

	padding: 0 18px;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 15px;

	border: none;

	border-radius: 5px;

	background: #62d474;

	color: #ffffff;

	font-family: "Outfit", sans-serif;

	font-size: 13px;

	font-weight: 500;

	cursor: pointer;

	box-shadow:
		0 5px 12px rgba(98, 212, 116, 0.18);

	transition:
		background 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;

}


.tns-vr-next-button strong {

	font-size: 18px;

	font-weight: 400;

	line-height: 1;

}


.tns-vr-next-button:hover {

	background: #4fc564;

	transform: translateY(-1px);

	box-shadow:
		0 7px 16px rgba(98, 212, 116, 0.24);

}


/* ---------------------------------------------------------
   PREVIOUS BUTTON
--------------------------------------------------------- */

.tns-vr-back-button {

	border: none;

	background: transparent;

	padding: 8px 0;

	color: #55c96d;

	font-family: "Outfit", sans-serif;

	font-size: 13px;

	font-weight: 500;

	cursor: pointer;

	transition:
		color 0.2s ease,
		transform 0.2s ease;

}


.tns-vr-back-button span {

	margin-right: 5px;

	font-size: 16px;

}


.tns-vr-back-button:hover {

	color: #319f49;

	transform: translateX(-2px);

}


/* ---------------------------------------------------------
   SUBMIT BUTTON
--------------------------------------------------------- */

.tns-vr-submit-button {

	min-width: 155px;

	height: 43px;

	padding: 0 20px;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 15px;

	border: none;

	border-radius: 5px;

	background: #62d474;

	color: #ffffff;

	font-family: "Outfit", sans-serif;

	font-size: 13px;

	font-weight: 500;

	cursor: pointer;

	box-shadow:
		0 5px 12px rgba(98, 212, 116, 0.18);

	transition:
		background 0.2s ease,
		transform 0.2s ease;

}


.tns-vr-submit-button strong {

	font-size: 18px;

	font-weight: 400;

}


.tns-vr-submit-button:hover {

	background: #4fc564;

	transform: translateY(-1px);

}


/* Disabled */

.tns-vr-submit-button:disabled,
.tns-vr-next-button:disabled {

	opacity: 0.5;

	cursor: not-allowed;

	transform: none;

}


/* ---------------------------------------------------------
   WHATSAPP BOX
--------------------------------------------------------- */

.tns-vr-whatsapp-box {

	display: flex;

	align-items: flex-start;

	gap: 13px;

	padding: 16px 17px;

	margin-top: 8px;

	border-radius: 6px;

	background: #f7faf7;

	border: 1px solid #e5eee6;

}


.tns-vr-whatsapp-symbol {

	flex: 0 0 30px;

	width: 30px;

	height: 30px;

	border-radius: 50%;

	display: flex;

	align-items: center;

	justify-content: center;

	background: #5bce73;

	color: #ffffff;

	font-size: 13px;

	font-weight: 600;

}


.tns-vr-whatsapp-box strong {

	display: block;

	margin-bottom: 3px;

	font-size: 13px;

	font-weight: 600;

	color: #53605a;

}


.tns-vr-whatsapp-box p {

	margin: 0;

	font-size: 12px;

	line-height: 1.6;

	color: #929b96;

}


/* ---------------------------------------------------------
   ERROR
--------------------------------------------------------- */

.tns-vr-error {

	width: 100%;

	padding: 12px 15px;

	margin-bottom: 20px;

	border-radius: 5px;

	background: #fff3f3;

	border: 1px solid #f1d3d3;

	color: #c04d4d;

	font-size: 13px;

	line-height: 1.5;

}


/* ---------------------------------------------------------
   SUCCESS
--------------------------------------------------------- */

.tns-vr-success {

	width: 100%;

	padding: 12px 15px;

	margin-bottom: 20px;

	border-radius: 5px;

	background: #f2faf4;

	border: 1px solid #d8eedc;

	color: #39934d;

	font-size: 13px;

	line-height: 1.5;

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 768px) {

	.tns-vr-booking-wrapper {

		margin: 20px auto;

	}

	.tns-vr-booking-form {

		padding: 32px 24px 28px;

		border-radius: 10px;

	}

	.tns-vr-form-header {

		margin-bottom: 35px;

	}

	.tns-vr-form-header h2 {

		font-size: 22px;

	}

	.tns-vr-form-header p {

		font-size: 13px;

	}

	.tns-vr-progress {

		margin-bottom: 38px;

	}

	.tns-vr-progress-track {

		left: 15%;

		right: 15%;

	}

	.tns-vr-step-circle {

		width: 36px;

		height: 36px;

		font-size: 13px;

	}

	.tns-vr-step-label {

		font-size: 11px;

	}

	.tns-vr-form-row {

		grid-template-columns: 1fr;

		gap: 20px;

		margin-bottom: 20px;

	}

	.tns-vr-form-group.tns-vr-full {

		grid-column: auto;

	}

	.tns-vr-section-heading h3 {

		font-size: 17px;

	}

}


/* ---------------------------------------------------------
   SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 480px) {

	.tns-vr-booking-form {

		padding: 25px 17px;

	}

	.tns-vr-form-header h2 {

		font-size: 20px;

	}

	.tns-vr-form-header p {

		font-size: 12px;

	}

	.tns-vr-progress {

		padding: 0;

	}

	.tns-vr-progress-track {

		top: 17px;

		left: 17%;

		right: 17%;

	}

	.tns-vr-step-circle {

		width: 34px;

		height: 34px;

		border-width: 2px;

	}

	.tns-vr-step-label {

		font-size: 10px;

		margin-top: 8px;

	}

	.tns-vr-form-actions {

		margin-top: 30px;

		padding-top: 22px;

	}

	.tns-vr-next-button {

		height: 42px;

	}

	.tns-vr-submit-button {

		min-width: 145px;

	}

	.tns-vr-whatsapp-box {

		padding: 13px;

	}

}

/* ---------------------------------------------------------
   VEHICLE PICKER (dropdown with vehicle images)
--------------------------------------------------------- */

.tns-vr-form-group.tns-vr-vehicle-enhanced {

	position: relative;

}

/* Native select stays in the page for validation, but is hidden. */

.tns-vr-form-group.tns-vr-vehicle-enhanced select[name="vehicle"] {

	position: absolute;

	width: 1px;

	height: 1px;

	padding: 0;

	margin: 0;

	opacity: 0;

	overflow: hidden;

	pointer-events: none;

	border: 0;

}

.tns-vr-vehicle-picker {

	position: relative;

	width: 100%;

}

.tns-vr-form-group .tns-vr-vehicle-trigger {

	display: flex;

	align-items: center;

	gap: 12px;

	width: 100%;

	min-height: 46px;

	padding: 6px 14px;

	font-family: "Outfit", sans-serif;

	font-size: 13px;

	font-weight: 400;

	color: #555;

	text-align: left;

	background: #ffffff;

	border: 1px solid #d7d9d8;

	border-radius: 5px;

	cursor: pointer;

	box-shadow: none;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;

}

.tns-vr-vehicle-trigger.is-placeholder {

	color: #b1b5b3;

}

.tns-vr-vehicle-trigger:focus,
.tns-vr-vehicle-picker.is-open .tns-vr-vehicle-trigger {

	outline: none;

	border-color: #5bce73;

	box-shadow: 0 0 0 3px rgba(91, 206, 115, 0.09);

}

/* Same red error state as the other fields. */

select.tns-vr-invalid + .tns-vr-vehicle-picker .tns-vr-vehicle-trigger {

	border-color: #e06b6b;

	background: #fffafa;

}

.tns-vr-vehicle-label {

	flex: 1 1 auto;

	min-width: 0;

	overflow: hidden;

	text-overflow: ellipsis;

	white-space: nowrap;

}

.tns-vr-vehicle-arrow {

	flex: 0 0 auto;

	width: 8px;

	height: 8px;

	margin-right: 2px;

	border-right: 2px solid #8b918e;

	border-bottom: 2px solid #8b918e;

	transform: rotate(45deg) translateY(-2px);

	transition: transform 0.2s ease;

}

.tns-vr-vehicle-picker.is-open .tns-vr-vehicle-arrow {

	transform: rotate(225deg) translateY(-2px);

}

.tns-vr-vehicle-thumb {

	flex: 0 0 auto;

	display: block;

	width: 72px;

	height: 46px;

	overflow: hidden;

	background: #f3f5f4;

	border-radius: 4px;

}

.tns-vr-vehicle-thumb img {

	display: block;

	width: 100%;

	height: 100%;

	object-fit: cover;

}

.tns-vr-vehicle-trigger .tns-vr-vehicle-thumb {

	width: 60px;

	height: 38px;

}

.tns-vr-vehicle-list {

	position: absolute;

	top: calc(100% + 6px);

	left: 0;

	right: 0;

	z-index: 30;

	max-height: 300px;

	margin: 0;

	padding: 6px;

	overflow-y: auto;

	list-style: none;

	background: #ffffff;

	border: 1px solid #d7d9d8;

	border-radius: 8px;

	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

}

.tns-vr-vehicle-list[hidden] {

	display: none;

}

.tns-vr-vehicle-item {

	display: flex;

	align-items: center;

	gap: 12px;

	margin: 0;

	padding: 8px;

	font-family: "Outfit", sans-serif;

	font-size: 13px;

	color: #444;

	border-radius: 6px;

	cursor: pointer;

}

.tns-vr-vehicle-item.is-active {

	background: #f1fbf3;

}

.tns-vr-vehicle-item.is-selected {

	color: #2f9e4a;

	font-weight: 500;

}

@media (max-width: 600px) {

	.tns-vr-vehicle-thumb {

		width: 64px;

		height: 42px;

	}

}

/* Keep the trigger looking like the other fields even when the theme
   restyles buttons on hover / focus / active. */

.tns-vr-form-group .tns-vr-vehicle-trigger:hover,
.tns-vr-form-group .tns-vr-vehicle-trigger:active {

	background: #ffffff;

	color: #555;

	border-color: #bfc4c1;

}

.tns-vr-form-group .tns-vr-vehicle-trigger.is-placeholder:hover {

	color: #b1b5b3;

}

.tns-vr-form-group .tns-vr-vehicle-trigger:focus {

	background: #ffffff;

	color: #555;

	border-color: #5bce73;

}