Redesign station cards with compact layout, improved typography, and expandable details

- Reduce header size and weight, convert all-caps brand names to title case
- Replace address line with distance-only in collapsed state, move brand label to expanded section
- Apply monospace font to pricing, reduce size and weight across labels
- Move badge list and full details into expandable section
- Normalize font weights throughout (semibold for headings, medium for labels)
- Create `.pill` component class with `.is-active` state for consistent filter styling
- Apply pill styling to SearchBar filters, StationList sort buttons, and brand filter
- Add `name` attributes to fuel type and radius selects
- Update package dependencies (@tailwindcss/node, @tailwindcss/oxide, @rolldown/*)

resources/js/components/StationList.vue

@@ -8,14 +8,10 @@
             <button
                 v-for="option in sortOptions"
                 :key="option.value"
-                :class="[
-                    'inline-flex items-center gap-2 h-10 px-3 rounded-full border transition-colors cursor-pointer',
-                    currentSort === option.value
-                        ? 'bg-primary/10 border-primary text-primary'
-                        : 'bg-white border-zinc-200 text-zinc-700 hover:border-zinc-300',
-                ]"
-                @click="emit('sort', option.value)"
+                :class="{ 'is-active': currentSort === option.value }"
+                class="pill"
                 type="button"
+                @click="emit('sort', option.value)"
             >
                 <iconify-icon :icon="option.icon" class="text-sm opacity-70"></iconify-icon>
                 <span class="text-sm font-medium">{{ option.label }}</span>
@@ -24,12 +20,8 @@
             <!-- Brand filter -->
             <label
                 v-if="brands.length > 1"
-                :class="[
-                    'relative group inline-flex items-center gap-2 h-10 pl-3 pr-2 rounded-full border transition-colors cursor-pointer',
-                    brandFilter
-                        ? 'bg-primary/10 border-primary text-primary'
-                        : 'bg-white border-zinc-200 text-zinc-700 hover:border-zinc-300',
-                ]"
+                :class="{ 'is-active': brandFilter }"
+                class="pill group"
             >
                 <iconify-icon class="text-sm opacity-70" icon="lucide:tag"></iconify-icon>
                 <span class="text-sm font-medium">{{ brandFilter || 'All brands' }}</span>