.parking-availability { background: #f0f7fb; color: #061f38; }
.parking-availability-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
.parking-availability .parking-title { display: block; text-align: left; margin: 0; }
.parking-availability .parking-title::before, .parking-availability .parking-title::after { display: none; }
.parking-availability-eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: #0b5fa8; margin-bottom: 12px; }
.parking-availability .parking-title p { color: #506577; margin: 12px 0 0; }
.parking-availability-refresh { flex-shrink: 0; padding: 13px 20px; border: 1px solid #c6dce9; background: white; border-radius: 12px; color: #0b5fa8; font: inherit; font-weight: 700; cursor: pointer; }
.parking-availability-refresh:hover { background: #e4f2fb; }
.parking-availability-refresh:focus-visible { outline: 3px solid #0b5fa8; outline-offset: 3px; }
.parking-availability-refresh:disabled { opacity: .6; cursor: wait; }
.parking-availability-status { color: #506577; font-size: 14px; margin: 0 0 20px; }
.parking-availability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.parking-availability-card { min-width: 0; padding: 25px; border: 1px solid #dce8ef; border-radius: 20px; background: white; box-shadow: 0 8px 24px #061f3806; }
.parking-availability-card h3 { margin: 16px 0 22px; font-size: 19px; line-height: 1.45; min-height: 2.9em; overflow-wrap: anywhere; color: #061f38; }
.parking-availability-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.parking-availability-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #eaf4fc; color: #0b5fa8; font-weight: 800; font-size: 22px; }
.parking-availability-badge { font-size: 12px; font-weight: 700; border-radius: 20px; padding: 6px 10px; background: #ecf8f2; color: #17623e; }
.parking-availability-card[data-level="busy"] .parking-availability-badge { background: #fff6df; color: #785500; }
.parking-availability-card[data-level="full"] .parking-availability-badge { background: #fff0ed; color: #a73724; }
.parking-availability-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 24px; }
.parking-availability-numbers dt { font-size: 12px; color: #506577; margin-bottom: 5px; }
.parking-availability-numbers dd { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.3; }
.parking-availability-numbers > :first-child dd { color: #17623e; }
.parking-availability-ratio { display: flex; justify-content: space-between; font-size: 13px; gap: 8px; }
.parking-availability-card progress { display: block; width: 100%; height: 8px; margin: 10px 0 18px; border: 0; border-radius: 8px; overflow: hidden; appearance: none; background: #e9eff3; accent-color: #0b5fa8; }
.parking-availability-card progress::-webkit-progress-bar { background: #e9eff3; }
.parking-availability-card progress::-webkit-progress-value { background: #0b5fa8; border-radius: 8px; }
.parking-availability-card progress::-moz-progress-bar { background: #0b5fa8; }
.parking-availability-updated { display: block; font-size: 12px; color: #506577; line-height: 1.6; }
.parking-availability-updated.is-old { color: #975315; }
.parking-availability-note { color: #506577; font-size: 13px; margin: 22px 0 0; line-height: 1.7; }
@media (max-width: 1050px) { .parking-availability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .parking-availability-grid { grid-template-columns: 1fr; } .parking-availability-heading { align-items: flex-start; flex-direction: column; } .parking-availability-card h3 { min-height: 0; } .parking-availability-card { padding: 22px; } }