@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

.lbf-form-wrap,
.lbf-form-wrap * {
	box-sizing: border-box !important;
}

.lbf-form-wrap {
	/* Core palette - matches the cream & gold "Our Fleet" site theme */
	--lbf-navy: #0c1524;
	--lbf-navy-2: #16233f;
	--lbf-gold: #c9a24b;
	--lbf-gold-light: #e6c877;
	--lbf-cream: #f7f2e7;
	--lbf-cream-2: #f0e9d8;
	--lbf-border: #e6dfc9;
	--lbf-text: #1c1c1c;
	--lbf-muted: #6d6d6d;
	--lbf-font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--lbf-font-body: 'Poppins', 'Segoe UI', Arial, sans-serif;

	max-width: 960px;
	width: 100%;
	margin: 0 auto !important;
	background: #fffdf9;
	border: 1px solid var(--lbf-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(12, 21, 36, 0.08);
	font-family: var(--lbf-font-body);
}

.lbf-form-header {
	background: linear-gradient(135deg, var(--lbf-navy) 0%, var(--lbf-navy-2) 100%);
	padding: 24px 40px;
	text-align: center;
}

.lbf-form-kicker {
	display: inline-block;
	color: var(--lbf-gold);
	font-size: 11px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 6px;
	position: relative;
	padding-bottom: 6px;
}

.lbf-form-kicker::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 46px;
	height: 2px;
	background: var(--lbf-gold);
}

.lbf-form-title {
	color: #ffffff;
	font-family: var(--lbf-font-head);
	font-size: 26px;
	font-weight: 700;
	margin: 0 !important;
	letter-spacing: 0.3px;
}

.lbf-form {
	padding: 26px 36px 30px;
	background: var(--lbf-cream);
}

/* Section headings - keeps long form scannable without extra scroll */
.lbf-section-title {
	font-family: var(--lbf-font-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .2px;
	color: var(--lbf-navy);
	margin: 22px 0 12px !important;
	padding-bottom: 8px;
	border-bottom: 1.5px solid var(--lbf-border);
	display: flex !important;
	align-items: center;
	gap: 8px;
}

.lbf-section-title::before {
	content: "";
	width: 4px;
	height: 15px;
	background: var(--lbf-gold);
	border-radius: 2px;
	display: inline-block;
	flex-shrink: 0;
	margin-right: 9px;
}

.lbf-form > .lbf-section-title:first-child {
	margin-top: 0 !important;
}

.lbf-row + .lbf-section-title,
.lbf-field + .lbf-section-title,
.lbf-trip-type + .lbf-section-title {
	margin-top: 6px !important;
}

/* Standalone fields (not inside a .lbf-row) still need breathing room */
.lbf-form > .lbf-field {
	margin-bottom: 14px !important;
}

.lbf-trip-type {
	display: flex !important;
	gap: 12px !important;
	margin: 0 0 16px !important;
	flex-wrap: wrap;
}

.lbf-radio {
	flex: 1 1 auto;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1.5px solid var(--lbf-border);
	border-radius: 8px;
	padding: 10px 14px;
	cursor: pointer;
	transition: all .18s ease;
	min-width: 150px;
	background: #ffffff;
	position: relative;
	margin: 0 !important;
}

.lbf-radio input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.lbf-radio span {
	font-size: 14px;
	font-weight: 600;
	color: var(--lbf-text);
	position: relative;
	padding-left: 26px;
}

.lbf-radio span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #c7c4b8;
	background: #fff;
	transition: all .18s ease;
}

.lbf-radio span::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 50%;
	transform: translateY(-50%) scale(0);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lbf-gold);
	transition: transform .18s ease;
}

.lbf-radio:has(input:checked) {
	border-color: var(--lbf-navy);
	background: var(--lbf-cream-2);
}

.lbf-radio:has(input:checked) span::before {
	border-color: var(--lbf-navy);
}

.lbf-radio:has(input:checked) span::after {
	transform: translateY(-50%) scale(1);
}

.lbf-radio:hover {
	border-color: var(--lbf-gold);
}

.lbf-row {
	display: flex !important;
	flex-wrap: wrap;
	gap: 16px !important;
	margin: 0 0 16px !important;
}

.lbf-field {
	flex: 1 1 220px;
	display: flex !important;
	flex-direction: column;
	gap: 5px !important;
	margin: 0 !important;
	min-width: 0;
}

.lbf-field label {
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--lbf-navy);
	margin: 0 !important;
}

.lbf-field .req {
	color: var(--lbf-gold);
}

.lbf-form input[type="text"],
.lbf-form input[type="email"],
.lbf-form input[type="tel"],
.lbf-form input[type="number"],
.lbf-form input[type="date"],
.lbf-form input[type="time"],
.lbf-form textarea {
	padding: 10px 14px !important;
	border: 1.5px solid var(--lbf-border) !important;
	border-radius: 8px !important;
	font-size: 14.5px !important;
	width: 100% !important;
	margin: 0 !important;
	background: #ffffff;
	color: var(--lbf-text);
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.lbf-form input:focus,
.lbf-form textarea:focus {
	outline: none;
	border-color: var(--lbf-gold) !important;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.18);
}

/* Google's Places widget (replaces the old pickup/dropoff text inputs). */
.lbf-place-autocomplete {
	width: 100%;
	--gmpx-color-surface: #ffffff;
	--gmpx-font-family: inherit;
}

.lbf-place-autocomplete::part(input) {
	padding: 10px 14px;
	border: 1.5px solid var(--lbf-border);
	border-radius: 8px;
	font-size: 14.5px;
	width: 100%;
	background: #ffffff;
	color: var(--lbf-text);
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.lbf-place-autocomplete::part(input):focus {
	outline: none;
	border-color: var(--lbf-gold);
	box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.18);
}

/* ============================
   Pickup (A) -> Drop-off (B) route section
   ============================ */
.lbf-route-group {
	flex: 2 1 460px;
	display: flex !important;
	align-items: flex-end;
	gap: 20px;
	position: relative;
	background: #ffffff;
	border: 1.5px solid var(--lbf-border);
	border-radius: 10px;
	padding: 12px 14px;
}

.lbf-pickup-field,
.lbf-dropoff-field {
	flex: 1 1 0;
	position: relative;
	padding-left: 30px !important;
}

.lbf-route-badge {
	position: absolute;
	left: 0;
	top: 26px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lbf-font-head);
	font-size: 11px;
	font-weight: 700;
	color: #ffffff;
	background: var(--lbf-navy);
	border: 2px solid var(--lbf-gold);
}

.lbf-route-badge-b {
	background: var(--lbf-gold);
	border-color: var(--lbf-navy);
	color: var(--lbf-navy);
}

.lbf-route-group--single .lbf-pickup-field {
	flex: 1 1 100%;
}

.lbf-vehicle-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px !important;
	margin: 0 !important;
}

.lbf-vehicle-card {
	border: 1.5px solid var(--lbf-border);
	border-radius: 10px;
	padding: 12px 14px;
	cursor: pointer;
	display: flex !important;
	flex-direction: column;
	gap: 5px;
	transition: all .18s ease;
	background: #ffffff;
	position: relative;
	margin: 0 !important;
}

.lbf-vehicle-card input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.lbf-vehicle-card::after {
	content: "";
	position: absolute;
	top: 14px;
	right: 14px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #c7c4b8;
	background: #fff;
}

.lbf-vehicle-card:has(input:checked) {
	border-color: var(--lbf-navy);
	background: var(--lbf-cream-2);
	box-shadow: 0 4px 14px rgba(12, 21, 36, 0.1);
}

.lbf-vehicle-card:has(input:checked)::after {
	border-color: var(--lbf-gold);
	background: var(--lbf-gold);
	box-shadow: inset 0 0 0 3px var(--lbf-cream-2);
}

.lbf-vehicle-card:hover {
	border-color: var(--lbf-gold);
}

.lbf-vehicle-name {
	font-family: var(--lbf-font-head);
	font-weight: 700;
	font-size: 16px;
	color: var(--lbf-navy);
	padding-right: 22px;
}

.lbf-vehicle-desc {
	font-size: 12.5px;
	color: var(--lbf-muted);
}

.lbf-extras-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 10px !important;
	margin: 8px 0 0 !important;
}

.lbf-checkbox {
	display: flex !important;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--lbf-text);
	border: 1.5px solid var(--lbf-border);
	border-radius: 8px;
	padding: 9px 14px;
	cursor: pointer;
	background: #ffffff;
	transition: all .15s ease;
	margin: 0 !important;
}

.lbf-checkbox:has(input:checked) {
	border-color: var(--lbf-gold);
	background: var(--lbf-cream-2);
}

.lbf-checkbox input {
	accent-color: var(--lbf-gold);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.lbf-divider {
	border: none;
	border-top: 1.5px solid var(--lbf-border);
	margin: 30px 0 26px !important;
}

.lbf-submit-btn {
	background: linear-gradient(135deg, var(--lbf-navy) 0%, var(--lbf-navy-2) 100%);
	color: var(--lbf-gold-light);
	border: 1.5px solid var(--lbf-navy);
	border-radius: 8px;
	padding: 14px 28px;
	margin-top: 6px !important;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	width: 100%;
	transition: all .18s ease;
	margin: 0 !important;
}

.lbf-submit-btn:hover {
	color: #ffffff;
	box-shadow: 0 6px 20px rgba(12, 21, 36, 0.25);
}

.lbf-submit-btn[disabled] {
	opacity: .6;
	cursor: not-allowed;
}

.lbf-messages {
	min-height: 0;
	margin: 4px 0 12px !important;
}

.lbf-messages:empty {
	margin: 0 !important;
}

.lbf-messages.lbf-success {
	background: #f2f7ef;
	color: #2c6b32;
	border: 1.5px solid #c7e0c2;
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 14px;
}

.lbf-messages.lbf-error {
	background: #fbeeee;
	color: #a3221d;
	border: 1.5px solid #f0c6c4;
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 14px;
}

.pac-container {
	z-index: 99999 !important;
}

/* Google Map preview shown below pickup/dropoff once both are entered */
.lbf-map-preview {
	margin: 0 0 16px !important;
	border-radius: 10px;
	overflow: hidden;
	border: 1.5px solid var(--lbf-border);
	height: 220px;
	display: none;
}

.lbf-map-preview.is-visible {
	display: block;
}

/* Tablet */
@media (max-width: 780px) {
	.lbf-form-wrap {
		border-radius: 10px;
	}
	.lbf-row {
		gap: 18px !important;
	}
	.lbf-vehicle-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.lbf-route-group {
		flex-direction: column !important;
		align-items: stretch;
	}
}

/* Mobile */
@media (max-width: 560px) {
	.lbf-form-header {
		padding: 24px 20px;
	}
	.lbf-form-title {
		font-size: 21px;
	}
	.lbf-form {
		padding: 22px 18px 26px;
	}
	.lbf-trip-type {
		flex-direction: column !important;
	}
	.lbf-row {
		flex-direction: column !important;
		gap: 14px !important;
	}
	.lbf-row > .lbf-field,
	.lbf-row > .lbf-route-group {
		flex: 0 1 auto !important;
	}
	.lbf-vehicle-grid {
		grid-template-columns: 1fr !important;
	}
	.lbf-extras-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.lbf-submit-btn {
		font-size: 14px;
		padding: 14px 20px;
	}
}

@media (max-width: 380px) {
	.lbf-extras-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Used by script.js to actually hide fields (e.g. drop-off when "Hourly" is
   picked). Needs the extra specificity + !important since .lbf-field itself
   forces display:flex !important, which would otherwise override a plain
   inline hide(). */
.lbf-form .lbf-field.lbf-hidden {
	display: none !important;
}