/* ============================================================ * Mobile UX polish for the booking flow. * * Pure visual / layout — no logic dependencies, no form-field * renames, no AJAX action changes. Loaded after the existing * book-service.css / custom.css / responsive.css so it can * override conflicting rules. * * Targets: book_your_dpf_service.php + book_your_land_rover_dpf_service.php * * Section anchor IDs (must NOT be renamed — shared with the JS * scroll-into-view hooks at the bottom of each template): * #regno * #search_button * #detail_confirmation (Yes/No vehicle confirmation) * #confirm_btn_yes / #confirm_btn_no * #service_price (top of revealed flow) * #additional_services_box * #appointment_date_and_time * #order_information * #customer_details * #user_detail_submit_button * ============================================================ */ /* WCAG-recommended minimum tap area (44px) — applied to every primary action button. font-size 16px stops iOS auto-zoom when the input/button receives focus. */ #search_button, #confirm_btn_yes, #confirm_btn_no, #detail_submit, #user_detail_submit_button { min-height: 48px; padding: 12px 24px; font-size: 16px; } /* Reg input visible & finger-friendly across all viewports */ #regno { height: 52px; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; } /* Mobile-first refinements — bulk of the journey lives below 768px */ @media (max-width: 768px) { /* Visually separate each revealed section so the customer feels the journey progressing one step at a time. scroll-margin-top sits the section under any sticky header when JS scrolls to it. */ #detail_confirmation, #service_price, #additional_services_box, #appointment_date_and_time, #order_information, #customer_details { border-top: 4px solid var(--dpfs-color-brand, #f09500); padding-top: 24px; margin-top: 28px; scroll-margin-top: 80px; } /* Yes / No confirmation buttons — equal-width row, larger tap area */ .confirm-btns { display: flex; gap: 12px; flex-wrap: wrap; } #confirm_btn_yes, #confirm_btn_no { flex: 1 1 auto; min-width: 120px; min-height: 56px; font-size: 18px; } /* Service / package selectors — full-width stack on mobile */ .service-card-row .service-card, .service-card { width: 100% !important; margin-bottom: 12px; min-height: 64px; } /* Customer detail form fields — bigger, less cramped */ #customer_details input[type="text"], #customer_details input[type="email"], #customer_details input[type="tel"], #customer_details select, #customer_details textarea { height: 48px; font-size: 16px; padding: 10px 14px; margin-bottom: 14px; } #customer_details textarea { height: auto; min-height: 96px; } /* Final submit button always visible at the bottom of the form */ #user_detail_submit_button { width: 100%; min-height: 56px; font-size: 18px; margin-top: 12px; } } /* ============================================================ * Vehicle confirmation card — fix the cropped image (whole * vehicle should fit, not just wheels) and de-clutter the * 8-field details list on mobile. * ============================================================ */ /* Image fix — applied at all viewports, helps desktop too */ .vehicle-img, .vehicle-img .inner-img { display: flex; align-items: center; justify-content: center; } #vehicle_image_data { max-width: 100%; max-height: 220px; width: auto; height: auto; object-fit: contain; display: block; } @media (max-width: 768px) { /* Mobile: tighter image cap so the card height stays sane */ #vehicle_image_data { max-height: 160px; } /* Hide non-essential vehicle fields on mobile. The fields stay in the DOM and still POST to the server — purely visual. Uses :has() to target the .info-list wrapper that contains each input by ID, so the label hides too. :has() is supported in Chrome/Edge/Safari/Firefox 2023+. */ .info-list:has(#vehicle_year), .info-list:has(#vehicle_fuel), .info-list:has(#vehicle_color), .info-list:has(#vehicle_wheel), .info-list:has(#vehicle_engine_capacity) { display: none !important; } /* Make the kept fields (Reg, Make, Model) read more like a summary panel than a form. Larger text, no input-looking border on the readonly values. The default .info-list rule in custom.css sets width: 25% (4-column desktop grid). That's what was clipping "FORD" → "FOR" and "TRANSIT CUSTOM…" → "TRA…" on mobile. Force full-width with high specificity + !important so each field gets its own row, label inline with the value (matching the lower "Vehicle Details" summary list further down). */ .vehicle-details-box .vehicle-info-table .info-list:has(#vehicle_reg), .vehicle-details-box .vehicle-info-table .info-list:has(#vehicle_make), .vehicle-details-box .vehicle-info-table .info-list:has(#vehicle_model) { display: flex !important; align-items: baseline; gap: 8px; width: 100% !important; margin-bottom: 6px; } .vehicle-details-box .vehicle-info-table .info-list:has(#vehicle_reg) label, .vehicle-details-box .vehicle-info-table .info-list:has(#vehicle_make) label, .vehicle-details-box .vehicle-info-table .info-list:has(#vehicle_model) label { flex: 0 0 auto; width: auto !important; } .vehicle-details-box .vehicle-info-table .info-list:has(#vehicle_reg) input[readonly], .vehicle-details-box .vehicle-info-table .info-list:has(#vehicle_make) input[readonly], .vehicle-details-box .vehicle-info-table .info-list:has(#vehicle_model) input[readonly] { border: 0; background: transparent; padding: 0; font-weight: 700; font-size: 18px; flex: 1 1 auto; min-width: 0; width: auto !important; max-width: none; text-overflow: clip; white-space: normal; overflow: visible; } } /* Service package cards — leave the desktop / tablet styling alone. Per May 2026 feedback the original mobile stacking (each card at full height with all bullets visible) is preferred over compact / tap-to-expand. No mobile package overrides here. */ /* ============================================================ * #err_msg — make the failed-lookup error message unmissable on * mobile. Customer-facing copy from the ItemNotFound block. * * Default desktop styling already pushes it to its own row inside * .vehicle-search-form via the inline