fix: date input alignment in labels on iOS Safari. closes: #3952

[sulimanbenhalim]

Problem

Fixes #3952

Date input fields with labels are misaligned on iOS Safari, causing a visual layout issue. The problem occurs when using input[type="date"] inside label containers where the date input appears vertically misaligned compared to the label text.

btw this affects both regular labels and floating labels.

Fix

Changed the CSS for input[type="date"] from @apply inline-block to @apply inline-flex to maintain consistent flexbox alignment within label containers. Also added specific iOS Safari fixes:

1. Main fix: Updated :where(input[type="date"]) to use inline-flex instead of inline-block
2. Safari-specific fix: Added &:has(> input[type="date"]) selector with improved webkit appearance handling

Testing

Tested on playground running on local network, verified fix on my iOS Safari