/* =========================================================
   Parkinfo – Traffic Light Parking Widget
   ========================================================= */

.parkinfo-widget {
	font-family: inherit;
	padding: 0.5rem 0;
}

.parkinfo-timestamp {
	font-size: 0.8em;
	color: #666;
	margin: 0 0 1rem 0;
}

/* Grid of lot cards */
.parkinfo-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Individual lot card */
.parkinfo-lot {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #f4f4f4;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 1rem 1.25rem;
	min-width: 240px;
	flex: 1 1 240px;
}

/* ── Traffic light housing ── */
.parkinfo-light {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	background: #1a1a1a;
	border-radius: 10px;
	padding: 10px 8px;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Dots — inactive by default */
.parkinfo-dot {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	opacity: 0.2;
	transition: opacity 0.2s ease;
}

.parkinfo-dot.is-active {
	opacity: 1;
	box-shadow: 0 0 8px 2px currentColor;
}

.parkinfo-dot--red {
	background-color: #e53935;
	color: #e53935;
}

.parkinfo-dot--yellow {
	background-color: #fdd835;
	color: #fdd835;
}

.parkinfo-dot--green {
	background-color: #43a047;
	color: #43a047;
}

/* ── Lot info ── */
.parkinfo-info {
	flex: 1;
	min-width: 0;
}

.parkinfo-name {
	margin: 0 0 0.2rem 0;
}

.parkinfo-status {
	font-size: 0.85rem;
	font-weight: 700;
	margin: 0 0 0.3rem 0;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.parkinfo-status--green  { color: #2e7d32; }
.parkinfo-status--yellow { color: #b45309; } /* was #f57f17 — 2.4:1 contrast (fail); #b45309 = 4.6:1 (AA pass) */
.parkinfo-status--red    { color: #c62828; }

.parkinfo-spots {
	font-size: 0.85rem;
	color: #444;
	margin: 0;
}

.parkinfo-spots strong {
	font-size: 1.1em;
}

/* Loading state */
.parkinfo-loading {
	color: #666;
	font-style: italic;
}

/* Error state */
.parkinfo-error {
	color: #c62828;
	font-style: italic;
}

/* ── Responsive: stack on narrow screens ── */
@media (max-width: 480px) {
	.parkinfo-lot {
		flex-direction: column;
		align-items: flex-start;
	}

	.parkinfo-light {
		flex-direction: row;
		padding: 8px 10px;
		gap: 8px;
	}
}