/* Lovesgrove Fixed-Price Airport Booking – uses the theme's tokens when present. */
.lfab {
	--lfab-navy: var(--c-navy-900, #0b1f3a);
	--lfab-amber: var(--c-amber-500, #f5b700);
	--lfab-amber-dark: var(--c-amber-600, #d99f00);
	--lfab-amber-soft: var(--c-amber-100, #fff4cc);
	--lfab-ink: var(--c-ink, #1a1f2b);
	--lfab-muted: var(--c-muted, #5b6475);
	--lfab-surface: var(--c-surface, #f6f5f2);
	--lfab-border: var(--c-border, #e3e1dc);
	--lfab-error: var(--c-error, #b42318);
	--lfab-success: var(--c-success, #1e7f4f);
	--lfab-focus: var(--c-focus, #2563eb);
	--lfab-radius: var(--radius-lg, 12px);
	--lfab-font-head: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif);
	--lfab-font: var(--font-body, "Inter", system-ui, sans-serif);
	max-width: 1100px;
	margin-inline: auto;
	font-family: var(--lfab-font);
	color: var(--lfab-ink);
	line-height: 1.5;
}
.lfab *, .lfab *::before, .lfab *::after { box-sizing: border-box; }
.lfab [hidden] { display: none !important; }

/* Progress */
.lfab .lfab-steps {
	display: flex; gap: .5rem; list-style: none; margin: 0 0 1.25rem; padding: 0 !important;
	counter-reset: none;
}
.lfab .lfab-steps__item {
	flex: 1 1 0; display: flex; align-items: center; gap: .6rem; min-width: 0;
	padding: .7rem .9rem; border-radius: var(--lfab-radius);
	background: var(--lfab-surface); color: var(--lfab-muted);
	font-weight: 600; font-size: .9375rem; margin: 0;
	border: 1px solid transparent;
}
.lfab .lfab-steps__num {
	flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	background: #fff; border: 2px solid var(--lfab-border); font-size: .875rem; color: var(--lfab-navy);
}
.lfab .lfab-steps__item.is-current { background: var(--lfab-navy); color: #fff; }
.lfab .lfab-steps__item.is-current .lfab-steps__num { background: var(--lfab-amber); border-color: var(--lfab-amber); color: var(--lfab-navy); }
.lfab .lfab-steps__item.is-done { background: var(--lfab-amber-soft); color: var(--lfab-navy); }
.lfab .lfab-steps__item.is-done .lfab-steps__num { background: var(--lfab-success); border-color: var(--lfab-success); color: #fff; }

/* Panels */
.lfab .lfab-panel {
	background: #fff; border: 1px solid var(--lfab-border); border-radius: var(--lfab-radius);
	padding: clamp(1.1rem, .8rem + 1.5vw, 2rem); margin-bottom: 1.25rem;
	box-shadow: 0 1px 2px rgba(11, 31, 58, .06), 0 8px 24px rgba(11, 31, 58, .06);
	scroll-margin-top: calc(var(--header-h, 72px) + 16px);
}
.lfab .lfab-panel__title {
	display: flex; align-items: center; gap: .65rem; margin: 0 0 1.25rem;
	font-family: var(--lfab-font-head); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 800; color: var(--lfab-navy);
	line-height: 1.25;
}
.lfab .lfab-panel__title:focus { outline: none; }
.lfab .lfab-panel__num {
	display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
	background: var(--lfab-amber-soft); color: var(--lfab-navy); font-size: 1rem; flex: none;
}

/* Fields */
.lfab .lfab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.lfab .lfab-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.lfab .lfab-field--wide { grid-column: 1 / -1; }
.lfab .lfab-field label { font-weight: 600; font-size: .9375rem; color: var(--lfab-navy); }
.lfab .lfab-req { color: var(--lfab-error); }
.lfab .lfab-optional { font-weight: 400; color: var(--lfab-muted); font-size: .875rem; }
.lfab input[type="text"], .lfab input[type="date"], .lfab input[type="time"], .lfab select, .lfab textarea {
	width: 100%; min-height: 48px; padding: .65rem .85rem;
	border: 1.5px solid #c9ced8; border-radius: 8px; background: #fff;
	font: inherit; font-size: 1rem; color: var(--lfab-ink);
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none; appearance: none;
}
.lfab select {
	padding-right: 2.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230b1f3a' stroke-width='2' d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right .9rem center;
}
.lfab textarea { min-height: 88px; resize: vertical; }
.lfab input:focus, .lfab select:focus, .lfab textarea:focus {
	outline: none; border-color: var(--lfab-navy); box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
}
.lfab [aria-invalid="true"] { border-color: var(--lfab-error) !important; background-color: #fff8f7; }
.lfab .lfab-fixed { position: relative; }
.lfab .lfab-fixed svg { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--lfab-amber-dark); pointer-events: none; }
.lfab .lfab-fixed input[readonly] { padding-left: 2.4rem; background: var(--lfab-surface); font-weight: 600; color: var(--lfab-navy); cursor: default; }
.lfab .lfab-hint { margin: 0; font-size: .875rem; color: var(--lfab-muted); }
.lfab .lfab-error { margin: 0; font-size: .875rem; font-weight: 600; color: var(--lfab-error); }
.lfab .lfab-error::before { content: "! "; }

.lfab .lfab-alert {
	margin: 0 0 1.25rem; padding: .9rem 1.1rem; border-radius: 8px;
	background: #fef3f2; border: 1px solid #fecdca; border-left: 4px solid var(--lfab-error);
	color: #7a271a; font-weight: 600;
}
.lfab .lfab-alert:focus { outline: 3px solid var(--lfab-focus); outline-offset: 2px; }

.lfab .lfab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.5rem; }

/* Buttons */
.lfab .lfab-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 48px; padding: .7rem 1.4rem; border: 2px solid transparent; border-radius: 8px;
	font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
	transition: background-color .15s, transform .15s, box-shadow .15s;
}
.lfab .lfab-btn--primary { background: var(--lfab-amber); color: var(--lfab-navy); }
.lfab .lfab-btn--primary:hover:not(:disabled) { background: var(--lfab-amber-dark); color: var(--lfab-navy); }
.lfab .lfab-btn--lg { min-height: 56px; padding-inline: 1.75rem; font-size: 1.0625rem; }
.lfab .lfab-btn--block { width: 100%; }
.lfab .lfab-btn:focus-visible { outline: 3px solid var(--lfab-focus); outline-offset: 2px; }
.lfab .lfab-btn:disabled { background: #e7e9ee; color: #6b7280; cursor: not-allowed; }
.lfab .lfab-btn.is-loading { cursor: progress; background: var(--lfab-amber); color: var(--lfab-navy); }
.lfab .lfab-spinner {
	width: 18px; height: 18px; border-radius: 50%;
	border: 2.5px solid currentColor; border-right-color: transparent;
	animation: lfab-spin .7s linear infinite;
}
@keyframes lfab-spin { to { transform: rotate(360deg); } }

/* Vehicle cards */
.lfab .lfab-summary {
	margin: -0.5rem 0 1.25rem; padding: .65rem .9rem; border-radius: 8px;
	background: var(--lfab-surface); color: var(--lfab-navy); font-weight: 600;
}
.lfab .lfab-summary:empty { display: none; }
.lfab .lfab-vehicles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.lfab .lfab-vehicle {
	display: flex; flex-direction: column; min-width: 0;
	background: #fff; border: 1.5px solid var(--lfab-border); border-radius: var(--lfab-radius); overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lfab .lfab-vehicle:hover:not(.is-unavailable) { transform: translateY(-4px); border-color: var(--lfab-amber); box-shadow: 0 16px 36px rgba(11, 31, 58, .12); }
.lfab .lfab-vehicle__media { background: linear-gradient(180deg, #eef2f7 0%, #f8f9fb 100%); aspect-ratio: 16 / 10; overflow: hidden; }
.lfab .lfab-vehicle__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lfab .lfab-vehicle__body { padding: 1.1rem 1.2rem 0; flex: 1 1 auto; }
.lfab .lfab-vehicle__name { margin: 0 0 .5rem; font-family: var(--lfab-font-head); font-size: 1.25rem; font-weight: 800; color: var(--lfab-navy); }
.lfab .lfab-vehicle__meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; list-style: none; margin: 0 0 .6rem; padding: 0; font-size: .9375rem; font-weight: 600; color: var(--lfab-navy); }
.lfab .lfab-vehicle__meta li { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.lfab .lfab-vehicle__meta svg { color: var(--lfab-amber-dark); flex: none; }
.lfab .lfab-vehicle__desc { margin: 0; font-size: .9375rem; color: var(--lfab-muted); }
.lfab .lfab-vehicle__foot { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .75rem; }
.lfab .lfab-price { display: flex; flex-direction: column; gap: .15rem; padding-top: .85rem; border-top: 1px solid var(--lfab-border); }
.lfab .lfab-price__amount { font-family: var(--lfab-font-head); font-size: 1.875rem; font-weight: 800; color: var(--lfab-navy); line-height: 1.1; }
.lfab .lfab-price__amount.is-empty { font-family: var(--lfab-font); font-size: .9375rem; font-weight: 600; color: var(--lfab-muted); line-height: 1.4; }
.lfab .lfab-price__note { font-size: .8125rem; color: var(--lfab-success); font-weight: 600; }
.lfab .lfab-vehicle__why { margin: 0; font-size: .875rem; font-weight: 600; color: var(--lfab-error); }
.lfab .lfab-vehicle.is-unavailable { opacity: .72; }
.lfab .lfab-vehicle.is-unavailable .lfab-vehicle__media img { filter: grayscale(1); }
.lfab .lfab-panel--vehicles > .lfab-error { margin-top: 1rem; }

/* Fare table */
.lfab .lfab-fares { margin-top: .25rem; border: 1px solid var(--lfab-border); border-radius: var(--lfab-radius); background: #fff; }
.lfab .lfab-fares summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 700; color: var(--lfab-navy); }
.lfab .lfab-fares summary:focus-visible { outline: 3px solid var(--lfab-focus); outline-offset: -3px; border-radius: var(--lfab-radius); }
.lfab .lfab-fares__scroll { overflow-x: auto; padding: 0 1.2rem; }
.lfab .lfab-fares table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 480px; margin: 0; }
.lfab .lfab-fares th, .lfab .lfab-fares td { padding: .65rem .5rem; border-bottom: 1px solid var(--lfab-border); text-align: left; }
.lfab .lfab-fares thead th { color: var(--lfab-muted); font-weight: 600; font-size: .875rem; }
.lfab .lfab-fares tbody th { font-weight: 600; color: var(--lfab-navy); }
.lfab .lfab-fares td { font-weight: 700; color: var(--lfab-navy); white-space: nowrap; }
.lfab .lfab-fares .lfab-hint { padding: .75rem 1.2rem 1rem; }

.lfab-unavailable { padding: 1rem 1.2rem; border-radius: 8px; background: var(--c-amber-100, #fff4cc); border-left: 4px solid var(--c-amber-500, #f5b700); }
.lfab-unavailable p { margin: 0; }

/* Tablet */
@media (max-width: 1024px) {
	.lfab .lfab-vehicles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phone */
@media (max-width: 767px) {
	.lfab .lfab-grid { grid-template-columns: minmax(0, 1fr); }
	.lfab .lfab-vehicles { grid-template-columns: minmax(0, 1fr); }
	.lfab .lfab-steps__item { flex-direction: column; gap: .3rem; padding: .55rem .4rem; font-size: .8125rem; text-align: center; }
	.lfab .lfab-actions .lfab-btn { width: 100%; }
	.lfab .lfab-vehicle__media { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
	.lfab .lfab-vehicle, .lfab .lfab-btn { transition: none; }
	.lfab .lfab-vehicle:hover:not(.is-unavailable) { transform: none; }
	.lfab .lfab-spinner { animation-duration: 2s; }
}

/* Line up image, text and price rows across cards where supported. */
@supports (grid-template-rows: subgrid) {
	.lfab .lfab-vehicles { row-gap: 1.25rem; }
	.lfab .lfab-vehicle { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
	.lfab .lfab-vehicle__foot { justify-content: flex-start; }
}
