/* =============================================================================================
   enquiries — Part exchange, Wanted, Contact (+ #visit) and the staff inbox.
   Loaded by enquiries/_layout.html and the staff inbox templates (R9: one CSS file per app).
   Layout and spacing are the v12 design's (PartExchange12, Wanted12, Contact12); the look is the
   approved Soft style (design/Soft-style-update.md, docs/NOTES-soft-global.md §3): display type on
   the Soft scale in Jakarta 800, cards and panels in 1.5px --um-rule with the --r-* radii, pill tags,
   square (1:1) photo frames (CR1), no corner marks, sections told apart by white / pale grounds
   instead of rules. Colours, sizes and radii come from um.css tokens. Shared classes used as-is:
   .page .side .side--75 .buy .form-stack .legend-lg .g2m .g5m .r3 .ropt .chip .inp .lbl .hint .err
   .steps .phone-box .success .frame .frame--primary .kicker .h1 .h1-xl .h2 .h2-panel .lede .text-2
   .span-all .stack-8 .stack-16 .sec--pale .m0 .b-p .b-o .b-sm.
   ============================================================================================= */

/* --- form pieces (PartExchange12 / Wanted12) -------------------------------------------------- */
.enq-h1 { margin: 0 0 10px; }
.enq-note { margin: -6px 0 14px; color: var(--um-muted); font-size: 16px; }
.enq-mt16 { margin-top: 16px; }
.enq-gap8 { gap: 8px; }
.enq-grades { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ropt.enq-grade { flex-direction: column; gap: 6px; }
.enq-grade__code {
  font-family: var(--um-font-head); font-weight: var(--um-head-weight); letter-spacing: var(--um-head-tracking);
  font-size: var(--um-grade-sm); line-height: 1; color: var(--um-primary);
}
.enq-grade__label { font-size: 14px; line-height: 1.3; }
.enq-sub { display: block; font-size: 15px; color: var(--um-muted); font-weight: 400; }
.enq-chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* The design's minimum button widths, which give way on a narrow screen: a fixed 240px plus the
   message card's padding pushed the Contact page 11px past a 320px screen. */
.enq-submit { justify-self: start; min-width: min(280px, 100%); max-width: 100%; }
.enq-submit--240 { min-width: min(240px, 100%); }
.form-stack .form-errors { margin: 0; }
/* The short privacy notice just above each form's button (legal wording pass, 1 Oct 2026): body size,
   not small print, linking to the full Privacy policy (UK GDPR Art 13, ICO "just-in-time" notices). */
.enq-privacy { color: var(--um-text-2); }
.enq-privacy p { margin: 0 0 8px; }
.enq-privacy p:last-child { margin-bottom: 0; }
.enq-privacy .enq-privacy__h { font-weight: 700; color: var(--um-text); margin-bottom: 4px; }
.enq-privacy a { color: var(--um-primary); font-weight: 600; }

/* The honeypot: out of sight, out of the tab order and hidden from screen readers (aria-hidden). */
.enq-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* --- side panel ------------------------------------------------------------------------------- */
.enq-aside { display: grid; gap: 18px; }
.enq-card { padding: 24px; }
.enq-card__h { margin: 0 0 14px; }                 /* with .h2-panel */

/* --- success states (the page's H1 after post/redirect/get) ----------------------------------- */
.enq-success__h { margin: 14px 0 10px; }           /* with .h2 */
.enq-success__p { margin: 0 0 24px; color: var(--um-text-2); }

/* --- Contact12 -------------------------------------------------------------------------------- */
.enq-contact { padding-top: 32px; padding-bottom: 64px; }
.enq-contact .side > * { min-width: 0; }
.enq-mb16 { margin: 0 0 16px; }
.enq-mb10 { margin: 0 0 10px; }
.enq-mt24 { margin-top: 24px; }
.enq-form-card { padding: 28px; display: grid; gap: 18px; }
.enq-form-card .form-errors { margin: 0; }         /* the card's grid gap spaces it, as in the other forms */
.enq-sent { padding: 32px; }
.enq-sent__h { margin: 0 0 8px; }                  /* with .h2-panel */
.enq-sent__p { margin: 0; color: var(--um-text-2); }
.enq-phone { background: var(--um-navy-800); color: var(--um-white); padding: 26px; border-radius: var(--r-lg); }
.enq-phone__label { margin: 0 0 4px; color: var(--um-on-navy); }
.enq-phone__num {
  font-family: var(--um-font-head); font-weight: var(--um-head-weight); letter-spacing: var(--um-head-tracking);
  font-size: 30px; line-height: 1.15; color: var(--um-white); text-decoration: none;
}
.enq-phone__num:hover { color: var(--um-tint-1); }
.enq-hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin-top: 14px; font-size: 17px; }
.enq-hours__d { font-weight: 600; }
.enq-hours__h { color: var(--um-on-navy); }
.enq-phone__note { margin: 14px 0 0; font-size: 15px; color: var(--um-on-navy); }
.enq-strong { font-weight: 700; margin: 0 0 4px; }
.enq-addr { margin: 0 0 14px; color: var(--um-text-2); }
.enq-map {
  aspect-ratio: 16 / 9; background: var(--um-rule); border: var(--um-card-border); border-radius: var(--r-slot);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 14px; color: var(--um-muted); padding: 14px;
}
/* Audit B31: the "[MAP]" slot is gone unless a real map image is set; the link is always there. */
.enq-map--img { display: block; width: 100%; height: auto; padding: 0; object-fit: cover; }
.enq-maplink { margin: 12px 0 0; font-weight: 600; }
/* "Book a visit to Diss": on the pale ground (.sec--pale), no rules above or below. */
.enq-visit { scroll-margin-top: 12px; }
.enq-visit__inner { padding-top: 56px; padding-bottom: 56px; }
.enq-side-57 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
.enq-visit-form { display: grid; gap: 18px; }
.enq-visit-form .form-errors { margin: 0; }
.enq-booked { padding: 28px; }                     /* a white .frame--primary card on the pale section */
.enq-booked__h { margin: 0 0 6px; }                /* with .h2-panel */

/* --- staff inbox (/admin/inbox/): no design; the Soft home's cards, pills and radii ------------- */
.enq-counts { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0 0 18px; padding: 0; }
.enq-counts a { text-decoration: none; color: var(--um-text); }
.enq-counts a[aria-current="true"] { border-color: var(--um-primary); background: var(--um-tint-1); }
/* The Search cell has a hint under its input: cells line up at the top and the buttons drop by one
   label (a .lbl line + its 6px margin) so they sit level with the inputs, not with the hint. */
.enq-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 16px; align-items: start; margin: 0 0 18px; }
.enq-filters__go { display: flex; gap: 14px; align-items: center; min-height: 54px; margin-top: calc(1.5em + 6px); }
.enq-filters__go .lnk { display: inline-flex; align-items: center; }   /* centre its text in the 44px tap target */
/* position: relative makes the wrapper the containing block of the table's .visually-hidden "Action"
   header, so its scroller clips it: otherwise that absolutely positioned span sat at the table's far
   right edge and widened the whole page to ~635px on a phone. */
.enq-table-wrap { position: relative; overflow-x: auto; border: var(--um-card-border); border-radius: var(--r-lg); background: var(--um-white); }
.enq-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 16px; }   /* scrolls in its wrapper on a phone rather than squashing every column */
.enq-table th, .enq-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--um-rule); vertical-align: top; }
.enq-table tbody tr:last-child td { border-bottom: 0; }
.enq-table thead th { background: var(--um-tint-3); font-weight: 700; white-space: nowrap; }
.enq-table tr.is-handled td { color: var(--um-muted); }
.enq-kind {
  display: inline-flex; align-items: center; padding: 2px 10px; border: 1.5px solid var(--um-line); border-radius: var(--r-pill);
  font-size: 14px; font-weight: 700; white-space: nowrap; background: var(--um-white);
}
.enq-kind--wanted { border-color: var(--um-primary); color: var(--um-primary); }
.enq-kind--part-exchange { background: var(--um-tint-1); border-color: var(--um-tint-1); }
.enq-kind--visit { background: var(--um-tint-4); }
.enq-flag {
  display: inline-flex; align-items: center; margin: 4px 6px 4px 0; padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--um-navy-800); color: var(--um-white); font-size: 13px; font-weight: 800;
}
.enq-inline-form { display: inline; margin: 0; }
.enq-pager { display: flex; gap: 14px; align-items: center; margin-top: 18px; }
.enq-empty { background: var(--um-tint-4); border-radius: var(--r-panel); padding: 28px; text-align: center; color: var(--um-muted); }
.enq-detail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 36px; align-items: start; }
.enq-dl { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 8px 20px; margin: 0; }
.enq-dl dt { font-weight: 700; }
.enq-dl dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.enq-panel { border: var(--um-card-border); border-radius: var(--r-lg); background: var(--um-white); padding: 24px; min-width: 0; }
.enq-panel + .enq-panel { margin-top: 18px; }
.enq-panel__h { margin: 0 0 14px; }                /* with .h2-panel */
.enq-list { list-style: none; margin: 0; padding: 0; }
.enq-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.enq-photos a { display: block; aspect-ratio: 1 / 1; border: var(--um-card-border); border-radius: var(--r-sm); overflow: hidden; background: var(--um-rule); }
.enq-photos img { width: 100%; height: 100%; object-fit: cover; }
.enq-match { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--um-rule); }
.enq-match:last-of-type { border-bottom: 0; }
.enq-match__photo {
  aspect-ratio: 1 / 1; border: var(--um-card-border); border-radius: var(--r-md); background: var(--um-rule); overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--um-muted);
}
.enq-match__photo img { width: 100%; height: 100%; object-fit: cover; }
.enq-match__title { font-weight: 700; margin: 0; }
.enq-match__meta { margin: 2px 0 6px; font-size: 15px; color: var(--um-muted); }
.enq-match__price {
  font-family: var(--um-font-head); font-weight: var(--um-head-weight); letter-spacing: var(--um-head-tracking);
  font-size: 24px; line-height: 1; text-align: right;
}
.enq-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.enq-tags + .enq-tags { margin-top: 6px; }
.enq-tags li { padding: 1px 10px; border: 1.5px solid var(--um-line); border-radius: var(--r-pill); }
.enq-tags--fit li { border-color: var(--um-primary); color: var(--um-primary); background: var(--um-tint-3); }
.enq-tags--concern li { border-style: dashed; color: var(--um-text-2); }
.enq-note-form { display: grid; gap: 14px; }

@media (max-width: 1060px) {
  .enq-detail { grid-template-columns: 1fr; }
  .enq-filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .enq-filters { grid-template-columns: 1fr; }
  .enq-filters__go { margin-top: 0; }
  .enq-match { grid-template-columns: 72px minmax(0, 1fr); }
  .enq-match__price { grid-column: 2; text-align: left; }
  .enq-dl { grid-template-columns: 1fr; }
}