Improve mobile booking flow with fixed actions, clearer validation, and cleaner widgets

[dyanakiev]

This PR improves the booking wizard experience on mobile devices. The booking flow is currently hard to use on small screens because the header takes too much space, action buttons move out of view, validation failures can feel silent, and some widgets take more room than they need.

The update makes the mobile booking UI feel more app-like: a compact fixed header keeps progress visible, the main actions stay fixed at the bottom, validation messages clearly explain what is missing, and the page scrolls directly to the field that needs attention.

What Changed

• Added a compact fixed mobile header for the booking wizard.
• Added a fixed bottom action bar for Back / Next / Confirm buttons.
• Reduced excess mobile spacing in wizard steps.
• Made available time buttons full-width on mobile.
• Added styled validation alerts when required booking steps are incomplete.
• Scrolls to the actual missing/invalid field, accounting for the fixed header.
• Tightened the ALTCHA widget on mobile.
• Removed Flatpickr arrow pseudo-elements from the booking calendar.

Why This Is Needed
Mobile users often book appointments quickly, usually with one hand and limited screen space. Keeping the main action buttons visible removes unnecessary scrolling, while clear error messages reduce confusion when a required step is missed.

This also prevents cases where validation fails but the user does not know why, especially on longer forms where the invalid field may be off-screen.

Example Scenarios

• A customer taps Next without selecting a provider: they now see a styled warning and are taken to the provider selector.
• A customer forgets to pick an appointment time: the page scrolls to the time area and explains what is missing.
• A required contact field is empty: the first invalid field is brought into view with its label visible below the fixed header.
• A customer reaches confirmation but forgets terms/privacy: the checkbox is highlighted and scrolled into view.
• On mobile, the ALTCHA challenge no longer dominates the confirmation step.

[alextselegidis]

Hello, I'm seeing quite some changes in the frontend SCSS, but we actually aim to reduce the amount of custom CSS that is needed for the application in order to provide better support for bootstrap themes. Can you please try to eliminate as much as possible these changes from the SCSS?

--

Alex Tselegidis, Easy!Appointments Creator

Go Premium: Custom Dev, Hosting, Support, Rebrand & more →