.pbl-parking-cards {
	position: relative;
	width: 100%;
}

.pbl-parking-cards--empty {
	padding: 1.5rem;
	border: 1px dashed var(--pbl-color-border, #e6ebf2);
	border-radius: 8px;
	color: var(--pbl-color-text-muted, #5b6b7c);
}

.pbl-parking-cards__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 2.5rem; /* Figma: controls below cards */
	margin-bottom: 0;
	width: 100%;
}

.pbl-parking-cards__controls[hidden] {
	display: none !important;
}

.pbl-parking-cards__progress {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex: 0 1 6.375rem; /* ~102px Figma bar cluster */
	min-width: 0;
}

.pbl-parking-cards__progress-seg {
	flex: 1 1 0;
	height: 2px;
	min-width: 1.5rem;
	max-width: 2.9375rem; /* ~47px Figma segment */
	padding: 0;
	border: 0;
	border-radius: 1px;
	background: #d2e6fe;
	cursor: pointer;
	appearance: none;
}

.pbl-parking-cards__progress-seg.is-active {
	background: #0a57cd;
}

.pbl-parking-cards__progress-seg:focus-visible {
	outline: 2px solid #0a57cd;
	outline-offset: 4px;
}

.pbl-parking-cards__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--pbl-color-primary, #0a57cd);
	border-radius: 999px;
	background: var(--pbl-color-white, #fff);
	color: var(--pbl-color-primary, #0a57cd);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.pbl-parking-cards__nav:hover,
.pbl-parking-cards__nav:focus-visible {
	background: var(--pbl-color-primary, #0a57cd);
	color: var(--pbl-color-white, #fff);
	outline: none;
}

.pbl-parking-cards__nav:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.pbl-parking-cards__track--carousel {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 0;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x;
	overscroll-behavior-x: contain;
	cursor: grab;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge legacy */
}

.pbl-parking-cards__track--carousel::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
	width: 0;
	height: 0;
}

.pbl-parking-cards__track--carousel.is-dragging,
.pbl-parking-cards__track--carousel.is-programmatic-scroll {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	user-select: none;
}

.pbl-parking-cards__track--carousel.is-dragging a {
	pointer-events: none;
}

.pbl-parking-cards__track--grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
}

/* Card — Figma Frame 1995 (312×566) */
.pbl-parking-card {
	position: relative;
	flex: 0 0 min(312px, 85vw);
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: flex;
	flex-direction: column;
	background: var(--pbl-color-white, #fff);
	border: 2px solid #e6f2ff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: none;
	cursor: pointer;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.pbl-parking-card:hover {
	box-shadow: 0 8px 24px rgba(0, 32, 66, 0.12);
}

/* Figma active card: green border + elevated shadow */
.pbl-parking-card.is-active {
	border-color: #46ce42;
	box-shadow: 0 16px 40px rgba(0, 32, 66, 0.16);
	z-index: 1;
}

.pbl-parking-cards__track--grid .pbl-parking-card {
	flex: none;
	width: auto;
	min-width: 0;
}

.pbl-parking-card__media {
	position: relative;
	height: 220px;
	background: var(--pbl-color-blue-soft, #e8f0fb);
	overflow: hidden;
	border-radius: 12px 12px 0 0;
}

.pbl-parking-card__media-frame {
	display: block;
	height: 100%;
}

.pbl-parking-card__media img,
.pbl-parking-card__media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pbl-parking-card__index {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--pbl-color-white, #fff);
	border-radius: 12px 0 12px 0;
}

.pbl-parking-card__index-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: var(--pbl-color-primary, #0a57cd);
	color: var(--pbl-color-white, #fff);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
}

.pbl-parking-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 1rem;
	padding: 1.25rem 1rem;
	background: var(--pbl-color-white, #fff);
}

.pbl-parking-card__content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}

.pbl-parking-card__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--pbl-color-primary, #0a57cd);
}

.pbl-parking-card__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.5rem;
	color: var(--pbl-color-navy, #002042);
}

.pbl-parking-card__text {
	margin: 0;
	color: var(--pbl-color-navy, #002042);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5rem;
	letter-spacing: -0.02em;
}

.pbl-parking-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: flex-start;
}

.pbl-parking-card__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	border-radius: 32px;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}

.pbl-parking-card__pill--availability {
	background: #daffd9;
	color: #05a700;
}

.pbl-parking-card[data-status="limited"] .pbl-parking-card__pill--availability {
	background: #fff4d6;
	color: #9a6b00;
}

.pbl-parking-card[data-status="full"] .pbl-parking-card__pill--availability,
.pbl-parking-card[data-status="unavailable"] .pbl-parking-card__pill--availability {
	background: rgba(218, 29, 29, 0.12);
	color: var(--pbl-color-danger, #da1d1d);
}

.pbl-parking-card__pill--type {
	background: var(--pbl-color-white, #fff);
	border: 1px solid #d2e6fe;
	color: var(--pbl-color-primary, #0a57cd);
}

.pbl-parking-card__actions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: auto;
}

/* Local button primitives so the widget does not depend on theme enqueue order. */
.pbl-parking-card .pbl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	box-sizing: border-box;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease;
}

.pbl-parking-card .pbl-btn--primary {
	background: var(--pbl-color-primary, #0a57cd);
	color: var(--pbl-color-white, #fff);
}

.pbl-parking-card .pbl-btn--secondary {
	background: transparent;
	border-color: var(--pbl-color-primary, #0a57cd);
	color: var(--pbl-color-primary, #0a57cd);
}

.pbl-parking-card .pbl-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pbl-parking-card__cta {
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 56px;
	padding: 0.75rem 1.25rem;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.125rem;
}

.pbl-parking-card__cta-label {
	flex: 0 1 auto;
}

.pbl-parking-card__cta-icon {
	width: 2rem;
	height: 2rem;
	padding: 0;
	border-radius: 999px;
	background: var(--pbl-color-white, #fff);
	color: var(--pbl-color-primary, #0a57cd);
}

.pbl-parking-card__cta-icon img {
	display: block;
	width: 14px;
	height: 14px;
	object-fit: contain;
}

.pbl-parking-card__cta-icon--pin {
	background: transparent;
	overflow: hidden;
}

.pbl-parking-card__cta-icon--pin img {
	width: 32px;
	height: 32px;
}

.pbl-parking-card__actions .pbl-btn--secondary:hover,
.pbl-parking-card__actions .pbl-btn--secondary:focus-visible {
	background: #e8f0fb;
	border-color: var(--pbl-color-primary, #0a57cd);
	color: var(--pbl-color-primary, #0a57cd);
}

.pbl-parking-card__actions .pbl-btn--primary:hover,
.pbl-parking-card__actions .pbl-btn--primary:focus-visible {
	background: var(--pbl-color-navy, #002042);
	color: var(--pbl-color-white, #fff);
}

@media (max-width: 1024px) {
	.pbl-parking-cards__track--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.pbl-parking-cards__track--grid {
		grid-template-columns: 1fr;
	}

	.pbl-parking-cards__track--carousel {
		gap: 1rem;
		/* Side padding so the active card can sit centered. */
		padding-inline: calc((100% - min(312px, 85vw)) / 2);
		scroll-padding-inline: calc((100% - min(312px, 85vw)) / 2);
	}

	.pbl-parking-cards__controls {
		margin-top: 1.5rem;
		gap: 1rem;
	}

	.pbl-parking-cards__progress {
		flex: 1 1 auto;
		max-width: 8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pbl-parking-cards__track--carousel {
		scroll-behavior: auto;
	}
}