/* * Truck Enforcement Request — 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-truck-enforcement-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-truck-enforcement-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; } /* Label styling */ .ppa-truck-enforcement-form label { font-size: 1.05rem; font-weight: 600; } /* Required field asterisk — added via in the form template */ .ppa-truck-enforcement-form .ppa-req { color: red; margin-left: 0.15em; } /* Make inputs fill their column */ .ppa-truck-enforcement-form input[type="text"], .ppa-truck-enforcement-form input[type="email"], .ppa-truck-enforcement-form select, .ppa-truck-enforcement-form textarea { width: 100%; box-sizing: border-box; font-size: 1rem; margin-top: 0.4rem; color: #333; background-color: #fff; } .ppa-truck-enforcement-form input[type="text"], .ppa-truck-enforcement-form input[type="email"], .ppa-truck-enforcement-form textarea { padding: 1rem 0.625rem; } /* Select needs less vertical padding or the chosen value gets clipped */ .ppa-truck-enforcement-form select { padding: 0.5rem 0.625rem; } /* jQuery UI Autocomplete dropdown * The widget is appended to by jQuery UI, so do NOT scope these * rules inside .ppa-truck-enforcement-form or they will never match. */ .ui-autocomplete { max-height: 200px; overflow-y: auto; overflow-x: hidden; font-size: 0.85rem; } /* Stack to single column on narrow screens */ @media (max-width: 640px) { .ppa-truck-enforcement-grid { grid-template-columns: 1fr; } } /* Field list inside the error banner */ .ppa-truck-enforcement-form .wpcf7-response-output ul { margin: 0.4rem 0 0 1.4rem; padding: 0; list-style: disc; } .ppa-truck-enforcement-form .wpcf7-response-output li { margin: 0.15rem 0; }