/* * Mobility Access Violation Report — form layout styles * * Loaded automatically by the plugin via wp_enqueue_style. * * Two-column layout on desktop; stacks to single column on mobile. */ /* * Two-column layout using CSS Grid. * Each adjacent pair of

tags inside .ppa-mobility-access-grid forms one * implicit grid row. When a CF7 validation error expands one cell, the paired * cell in the same row expands with it, keeping opposite columns aligned. */ .ppa-mobility-access-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; } /* Label styling */ .ppa-mobility-access-form label { font-size: 1.05rem; font-weight: 600; } /* Required field asterisk — added via in the form template */ .ppa-mobility-access-form .ppa-req { color: red; margin-left: .15em; } /* Make inputs fill their column */ .ppa-mobility-access-form input[type="text"], .ppa-mobility-access-form input[type="date"], .ppa-mobility-access-form select, .ppa-mobility-access-form textarea { width: 100%; box-sizing: border-box; font-size: 1rem; margin-top: .4rem; color: #333; background-color: #fff; } .ppa-mobility-access-form input[type="text"], .ppa-mobility-access-form input[type="date"], .ppa-mobility-access-form textarea { padding: 1rem .625rem; } /* Select needs less vertical padding or the chosen value gets clipped */ .ppa-mobility-access-form select { padding: .5rem .625rem; } /* jQuery UI Autocomplete dropdown * The widget is appended to by jQuery UI, so do NOT scope these * rules inside .ppa-mobility-access-form or they will never match. */ .ui-autocomplete { max-height: 200px; overflow-y: auto; overflow-x: hidden; font-size: .85rem; } /* Ensure CF7 inline validation tips are always visible. * Some themes set color or display in ways that hide these. */ .ppa-mobility-access-form .wpcf7-not-valid-tip { display: block; color: #dc3232; font-size: .9rem; margin-top: .3rem; } /* Stack to single column on narrow screens */ @media (max-width: 640px) { .ppa-mobility-access-grid { grid-template-columns: 1fr; } }