.experience-pickup-card {
	position: relative;
	margin: 22px 0 26px;
	overflow: visible;
	border: 1px solid #dce5f0;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(19, 46, 91, .08);
}

.experience-pickup-header {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 19px 20px;
	border-bottom: 1px solid #e8eef6;
	border-radius: 18px 18px 0 0;
	background: linear-gradient(135deg, #f6f9fe, #fff8f2);
}


.experience-pickup-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: #ff7417;
	color: #fff;
	font-size: 18px;
	box-shadow: 0 8px 18px rgba(255, 116, 23, .24);
}

.experience-pickup-eyebrow {
	display: block;
	margin-bottom: 3px;
	color: #ff7417;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .7px;
	text-transform: uppercase;
}

.experience-pickup-header h3 {
	margin: 0 0 4px;
	color: #132e5b;
	font-size: 18px;
	line-height: 1.25;
}

.experience-pickup-header p {
	margin: 0;
	color: #64748b;
	font-size: 12px;
	line-height: 1.45;
}

.pickup-requirement-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 20px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
}

	.pickup-requirement-badge.is-required {
		border: 1px solid #fed7aa;
		background: #fff0e1;
		color: #c2410c;
	}

	.pickup-requirement-badge.is-optional {
		border: 1px solid #bfdbfe;
		background: #eff6ff;
		color: #1d4ed8;
	}

.experience-pickup-body {
	padding: 20px;
}

.pickup-location-field {
	position: relative;
	width: 100%;
	margin: 0;
}

	.pickup-location-field > label {
		display: flex;
		align-items: center;
		gap: 4px;
		margin-bottom: 8px;
		color: #132e5b;
		font-size: 13px;
		font-weight: 700;
	}

.required-mark {
	color: #dc2626;
}

.pickup-autocomplete {
	position: relative;
	display: block;
	width: 100%;
	overflow: visible;
}

	.pickup-autocomplete .form-control {
		display: block;
		width: 100%;
		height: 50px;
		padding: 12px 46px 12px 15px;
		border: 1px solid #d7e1ed;
		border-radius: 13px;
		box-sizing: border-box;
		background: #fff;
		color: #132e5b;
		font-size: 14px;
	}

		.pickup-autocomplete .form-control:focus {
			border-color: #ff7417;
			outline: none;
			box-shadow: 0 0 0 4px rgba(255, 116, 23, .12);
		}

.pickup-search-icon {
	position: absolute;
	top: 25px;
	right: 15px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	color: #315381;
	transform: translateY(-50%);
	pointer-events: none;
}

.pickup-search-help {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 10px 0 0;
	color: #64748b;
	font-size: 11px;
	line-height: 1.45;
}

	.pickup-search-help i {
		margin-top: 2px;
		color: #16a34a;
	}

.pickup-confirmation-note {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-top: 17px;
	padding: 13px 14px;
	border: 1px solid #dbeafe;
	border-radius: 12px;
	background: #f5f9ff;
}

	.pickup-confirmation-note > span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		flex: 0 0 34px;
		border-radius: 9px;
		background: #dbeafe;
		color: #1d4ed8;
	}

	.pickup-confirmation-note strong {
		display: block;
		margin-bottom: 3px;
		color: #132e5b;
		font-size: 12px;
	}

	.pickup-confirmation-note p {
		margin: 0;
		color: #64748b;
		font-size: 11px;
		line-height: 1.45;
	}

.experience-pickup-card .location-results {
	position: absolute;
	top: calc(100% + 7px);
	right: 0;
	left: 0;
	z-index: 2147483647;
	display: block;
	max-height: 260px;
	overflow-y: auto;
	padding: 7px;
	border: 1px solid #dce5f0;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 20px 50px rgba(15, 35, 70, .22);
}

	.experience-pickup-card .location-results[hidden] {
		display: none !important;
	}

.experience-pickup-card + .form-row,
.experience-pickup-card + .form-group {
	margin-top: 24px;
}

@media (max-width: 600px) {
	.experience-pickup-header {
		grid-template-columns: 43px minmax(0, 1fr);
		padding: 16px;
	}

	.experience-pickup-icon {
		width: 43px;
		height: 43px;
	}

	.pickup-requirement-badge {
		grid-column: 2;
		justify-self: start;
	}

	.experience-pickup-body {
		padding: 16px;
	}
	/* =========================================================
   TRAVEL ESTIMATE CARD
   ========================================================= */

	.travel-estimate {
		position: relative;
		display: grid;
		grid-template-columns: 52px minmax(0, 1fr);
		align-items: center;
		gap: 15px;
		margin: 4px 0 22px;
		padding: 17px 19px;
		overflow: hidden;
		border: 1px solid #bce9d0;
		border-radius: 16px;
		background: linear-gradient( 135deg, #f0fdf6 0%, #f8fffb 55%, #effaf6 100% );
		color: #132e5b;
		box-shadow: 0 9px 24px rgba(20, 125, 75, .08);
		animation: travelEstimateAppear .25s ease-out;
	}

		/* Decorative background */
		.travel-estimate::before {
			position: absolute;
			top: -45px;
			right: -35px;
			width: 125px;
			height: 125px;
			border-radius: 50%;
			background: rgba(34, 197, 94, .07);
			content: "";
			pointer-events: none;
		}

		.travel-estimate::after {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 4px;
			border-radius: 16px 0 0 16px;
			background: linear-gradient( 180deg, #16a34a, #22c55e );
			content: "";
		}

		/* Hidden must override display:grid */
		.travel-estimate[hidden] {
			display: none !important;
		}

	/* Route icon */
	.travel-estimate-icon {
		position: relative;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		border-radius: 15px;
		background: linear-gradient( 135deg, #15803d, #22c55e );
		color: #fff;
		font-size: 19px;
		box-shadow: 0 8px 18px rgba(22, 163, 74, .25);
	}

	/* Content */
	.travel-estimate-content {
		position: relative;
		z-index: 1;
		min-width: 0;
	}

		.travel-estimate-content > strong {
			display: block;
			margin-bottom: 5px;
			color: #123760;
			font-size: 14px;
			font-weight: 800;
			line-height: 1.3;
		}

		/* Calculated distance and duration */
		.travel-estimate-content > p {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 7px;
			margin: 0 0 5px;
			color: #08783f;
			font-size: 17px;
			font-weight: 800;
			line-height: 1.3;
		}

		/* Disclaimer */
		.travel-estimate-content > small {
			display: block;
			color: #5d7167;
			font-size: 10px;
			font-weight: 500;
			line-height: 1.45;
		}

	/* Loading appearance */
	.travel-estimate.is-loading {
		border-color: #d8e4ef;
		background: linear-gradient( 135deg, #f8fafc, #f1f5f9 );
		box-shadow: none;
	}

		.travel-estimate.is-loading::after {
			background: linear-gradient( 180deg, #94a3b8, #cbd5e1 );
		}

		.travel-estimate.is-loading
		.travel-estimate-icon {
			background: linear-gradient( 135deg, #64748b, #94a3b8 );
			box-shadow: 0 8px 18px rgba(100, 116, 139, .18);
		}

			.travel-estimate.is-loading
			.travel-estimate-icon i {
				animation: routeIconPulse 1s ease-in-out infinite;
			}

	/* Optional result pieces */
	.estimate-distance,
	.estimate-duration {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		color: #08783f;
		font-size: 16px;
		font-weight: 800;
	}

		.estimate-distance i,
		.estimate-duration i {
			color: #16a34a;
			font-size: 13px;
		}

	.estimate-divider {
		color: #9bbcab;
		font-size: 13px;
	}

	/* Animation */
	@keyframes travelEstimateAppear {
		from {
			opacity: 0;
			transform: translateY(-7px) scale(.985);
		}

		to {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}

	@keyframes routeIconPulse {
		0%, 100% {
			opacity: .65;
			transform: scale(.92);
		}

		50% {
			opacity: 1;
			transform: scale(1);
		}
	}

	/* Mobile */
	@media (max-width: 600px) {
		.travel-estimate {
			grid-template-columns: 44px minmax(0, 1fr);
			gap: 12px;
			margin-bottom: 18px;
			padding: 14px;
			border-radius: 14px;
		}

		.travel-estimate-icon {
			width: 44px;
			height: 44px;
			border-radius: 12px;
			font-size: 16px;
		}

		.travel-estimate-content > p {
			font-size: 15px;
		}
	}
	.transfer-fields-card
	.transfer-location-row.pickup-only-row {
		grid-template-columns: minmax(0, 1fr);
	}

		.transfer-fields-card
		.transfer-location-row.pickup-only-row
		.form-group {
			max-width: 100%;
		}

}
/* =========================================
   Consistent transfer form layout
========================================= */

.transfer-fields-card {
	width: 100%;
}

	/* Pickup → Drop-off */

	.transfer-fields-card .transfer-location-row {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
		align-items: start;
		gap: 18px;
		width: 100%;
	}

		.transfer-fields-card .transfer-location-row.pickup-only-row {
			grid-template-columns: minmax(0, 1fr);
		}

	.transfer-fields-card .location-field {
		width: 100% !important;
		min-width: 0;
		margin: 0;
	}

	.transfer-fields-card .location-autocomplete {
		position: relative;
		width: 100%;
	}

		.transfer-fields-card .location-autocomplete .form-control {
			display: block;
			width: 100% !important;
			height: 50px;
			min-height: 50px;
			padding: 0 48px 0 15px;
			border: 1px solid #d7dfeb;
			border-radius: 12px;
			box-sizing: border-box;
			background: #fff;
			color: #152b54;
			font-family: "IBM Plex Sans", Arial, sans-serif;
			font-size: 13px;
			outline: none;
		}

			.transfer-fields-card .location-autocomplete .form-control:focus {
				border-color: #f47a18;
				box-shadow: 0 0 0 4px rgba(244, 122, 24, 0.12);
			}

	.transfer-fields-card .location-search-icon {
		position: absolute;
		top: 50%;
		right: 16px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		color: #18366a;
		pointer-events: none;
		transform: translateY(-50%);
	}

	.transfer-fields-card .transfer-direction {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50px;
		margin-top: 26px;
		color: #f47a18;
		font-size: 15px;
	}

	.transfer-fields-card .location-help,
	.transfer-fields-card .form-field-help {
		display: block;
		min-height: 31px;
		margin-top: 7px;
		color: #6b7d95;
		font-size: 10px;
		line-height: 1.45;
	}

	/* Vehicle and flight */

	.transfer-fields-card .transfer-transport-row {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 18px;
		width: 100%;
		margin-top: 22px;
	}

		.transfer-fields-card .transfer-transport-row > .form-group {
			width: 100% !important;
			min-width: 0;
			margin: 0;
		}

		.transfer-fields-card .transfer-transport-row .form-control {
			display: block;
			width: 100% !important;
			height: 48px;
			min-height: 48px;
			padding: 0 14px;
			border: 1px solid #d7dfeb;
			border-radius: 11px;
			box-sizing: border-box;
			background-color: #fff;
			color: #152b54;
			font-family: "IBM Plex Sans", Arial, sans-serif;
			font-size: 13px;
			outline: none;
		}

			.transfer-fields-card
			.transfer-transport-row
			.form-control:focus {
				border-color: #f47a18;
				box-shadow: 0 0 0 4px rgba(244, 122, 24, 0.12);
			}

	/* Passengers */

	.transfer-fields-card .transfer-passenger-row {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: start;
		gap: 18px;
		width: 100%;
		margin-top: 22px;
	}

		.transfer-fields-card .transfer-passenger-row > .form-group {
			width: 100% !important;
			min-width: 0;
			margin: 0;
		}

		.transfer-fields-card .transfer-passenger-row .form-control {
			display: block;
			width: 100% !important;
			height: 48px;
			min-height: 48px;
			padding: 0 14px;
			border: 1px solid #d7dfeb;
			border-radius: 11px;
			box-sizing: border-box;
			background: #fff;
			color: #152b54;
			font-family: "IBM Plex Sans", Arial, sans-serif;
			font-size: 13px;
			outline: none;
		}

	/* Labels */

	.transfer-fields-card .form-group > label {
		display: flex;
		align-items: center;
		gap: 6px;
		min-height: 20px;
		margin-bottom: 7px;
		color: #203a68;
		font-size: 12px;
		font-weight: 600;
	}

		.transfer-fields-card .form-group > label i {
			color: #f47a18;
			font-size: 11px;
		}

	/* Travel estimate always matches full width */

	.transfer-fields-card .travel-estimate {
		display: grid;
		grid-template-columns: 52px minmax(0, 1fr);
		align-items: center;
		gap: 14px;
		width: 100% !important;
		margin: 18px 0 0;
		padding: 16px 18px;
		border: 1px solid #d5e1ef;
		border-left: 4px solid #f47a18;
		border-radius: 13px;
		box-sizing: border-box;
		background: linear-gradient(135deg, #f8fbff, #eef5fc);
		box-shadow: 0 7px 20px rgba(21, 43, 84, 0.07);
	}

		.transfer-fields-card .travel-estimate[hidden] {
			display: none !important;
		}

	.transfer-fields-card .travel-estimate-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		margin: 0;
		border-radius: 14px;
		background: #193b70;
		color: #fff;
		font-size: 18px;
	}

	.transfer-fields-card .travel-estimate-content {
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 4px;
	}

		.transfer-fields-card .travel-estimate-content strong {
			margin: 0;
			color: #152b54;
			font-size: 14px;
			font-weight: 700;
		}

		.transfer-fields-card .travel-estimate-content p {
			margin: 0;
			color: #29466f;
			font-size: 13px;
			font-weight: 600;
		}

		.transfer-fields-card .travel-estimate-content small {
			margin: 0;
			color: #687b95;
			font-size: 10px;
			line-height: 1.45;
		}

	/* Validation */

	.transfer-fields-card .text-danger {
		display: block;
		margin-top: 5px;
		color: #c62828;
		font-size: 10px;
	}

/* Responsive */

@media (max-width: 700px) {
	.transfer-fields-card .transfer-location-row,
	.transfer-fields-card .transfer-transport-row,
	.transfer-fields-card .transfer-passenger-row {
		grid-template-columns: 1fr !important;
		gap: 15px;
	}

	.transfer-fields-card .transfer-direction {
		width: 100%;
		height: 24px;
		margin: -3px 0;
		transform: rotate(90deg);
	}

	.transfer-fields-card .location-help,
	.transfer-fields-card .form-field-help {
		min-height: 0;
	}
}
.transfer-fields-card .travel-estimate-label {
    color: #e5660b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
/* =========================================================
   Location autocomplete inside booking modal
   ========================================================= */

.booking-modal-overlay
.booking-product-fields,
.booking-modal-overlay
.product-fields-card,
.booking-modal-overlay
.form-row,
.booking-modal-overlay
.form-group,
.booking-modal-overlay
.location-field {
	overflow: visible !important;
}

.booking-modal-overlay
.location-field {
	position: relative;
}

.booking-modal-overlay
.location-autocomplete {
	position: relative !important;
	z-index: 20;
	width: 100%;
	overflow: visible !important;
}

	.booking-modal-overlay
	.location-autocomplete:focus-within {
		z-index: 500;
	}

.booking-modal-overlay
.location-results {
	position: absolute !important;
	top: calc(100% + 7px) !important;
	right: 0 !important;
	left: 0 !important;
	z-index: 50000 !important;
	display: block;
	width: 100% !important;
	max-height: 260px;
	margin: 0 !important;
	padding: 6px;
	overflow-x: hidden;
	overflow-y: auto;
	border: 1px solid #d4deeb;
	border-radius: 11px;
	background: #fff;
	box-shadow: 0 16px 35px rgba(19, 46, 91, 0.18);
}

	.booking-modal-overlay
	.location-results[hidden] {
		display: none !important;
	}

.booking-modal-overlay
.location-result-item {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	width: 100%;
	padding: 10px;
	border: 0;
	border-radius: 8px;
	background: #fff;
	color: #344054;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

	.booking-modal-overlay
	.location-result-item:hover,
	.booking-modal-overlay
	.location-result-item.is-active {
		background: #fff4e9;
		color: #173665;
	}

	.booking-modal-overlay
	.location-result-item i {
		margin-top: 2px;
		color: #f47a18;
	}

.booking-modal-overlay
.location-search-icon {
	position: absolute;
	top: 50%;
	right: 14px;
	z-index: 2;
	color: #173665;
	transform: translateY(-50%);
	pointer-events: none;
}

.booking-modal-overlay
.location-autocomplete .form-control {
	padding-right: 43px;
}