/**
 * VGTME — Request a Service page components (request-a-service.tpl.php only).
 *
 * Ported from the approved build's page-only inline <style> block
 * (ProjectHTML/request-a-service.html). A separate file, not an addition to
 * vgtme.css and not to vgt-sections.css, for the same reasons as
 * vgt-home-v3.css — see that file's header.
 *
 * Enqueued only when the page template is request-a-service.tpl.php
 * (includes/zt-styles-scripts.php).
 *
 * .form-msg IS DELIBERATELY NOT PORTED. The build styles it as a hidden box
 * that a `.show` class reveals; vgtme.css:407 already styles it as coloured
 * text toggled by .ok / .err, and contact-us.tpl.php depends on that. Copying
 * the build's rules here would give every .form-msg on the site `display:none`
 * and silently break the CONTACT form's status messages, since that template
 * never adds `.show`. This page follows the theme's existing .ok/.err plumbing
 * instead, which is what the migration brief asks for ("same status markup").
 *
 * @package VGTransportME
 */

.req-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:46px;align-items:start}

/* "Sending a parcel?" — the one place the page points at the app. */
.req-note{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:34px 32px;margin-bottom:26px}
.req-note h3{color:#fff;font-size:1.2rem;margin-bottom:10px}
.req-note p{color:rgba(255,255,255,.82);font-size:.95rem;margin-bottom:20px}
.req-note .btn{width:100%;justify-content:center}

/* "What happens next" + phone/email aside. */
.req-side{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 32px}
.req-side h3{font-size:1.15rem;margin-bottom:14px}
.req-side ul{list-style:none;margin:0 0 22px;padding:0}
.req-side li{position:relative;padding-left:26px;margin-bottom:12px;color:var(--grey);font-size:.95rem;line-height:1.6}
.req-side li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.req-side .rs-contact{border-top:1px solid var(--line);padding-top:20px}
.req-side .rs-contact a{display:block;font-family:var(--ff-head);font-weight:600;color:var(--ink);margin-bottom:6px}
.req-side .rs-contact a:hover{color:var(--gold)}

/* Field hints — including the one telling people not to send medical details. */
.hint{display:block;margin-top:7px;font-size:.83rem;color:var(--grey);line-height:1.55}

/* The ramp/lift constraint band above the fields. Factual, not decorative. */
.notice{background:var(--gold-soft);border-left:4px solid var(--gold);border-radius:10px;padding:16px 18px;margin-bottom:22px;font-size:.92rem;color:var(--ink);line-height:1.6}

/* Law 25 consent row. The label resets the theme's uppercase field-label
   styling: this is a sentence a visitor has to read, not a field name. */
.consent{display:flex;align-items:flex-start;gap:12px;margin:4px 0 18px}
.consent input[type=checkbox]{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--gold)}
.consent label{font-family:var(--ff-body);font-weight:400;text-transform:none;letter-spacing:0;font-size:.88rem;color:var(--grey);line-height:1.6;margin:0}
.consent label a{color:var(--gold-deep);text-decoration:underline}

@media(max-width:992px){.req-grid{grid-template-columns:1fr;gap:34px}}