/* Africar Spares Warehouse: the contact form's own parts, and sign in.
 *
 * Loaded by contact.html and login.html only, through extra_head, after
 * pages.css (which holds .split, .panel-box, .pg-foot, .pg-actions and the
 * Trading page's .tp-cards, .tp-label and .tp-ticks). Tokens, fields and
 * .checks come from site.css.
 *
 * Contact: the part card a product page's "Not sure it fits?" brings, the
 * topic's extra fields (a part check's vehicle and photos, a trade account
 * application's business details, a quote's reference, a return's part and
 * invoice numbers), and a server-side error shown on its field. Trade
 * accounts: the two kinds of account side by side, each with its own
 * button, and the passwordless sign-in beside them where it is on.
 */

/* Alpine shows and hides the topic's fields with the hidden attribute (the
   server sets it for the topic in the link): no rule here may override it */
.eq-form [hidden]{display:none!important}

/* ── The part being asked about ───────────────────────────────────────── */
/* drawn as the quote's part rows: an ink rule over hairline rows */
.eq-parts{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.eq-part{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.eq-thumb{display:grid;place-items:center;width:72px;height:72px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden;text-decoration:none}
.eq-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.eq-thumb span{padding:4px;color:var(--muted);font-size:12px;font-weight:600;line-height:1.2;text-align:center}
.eq-info{min-width:0}
.eq-sku{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px}
.eq-sku b{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.eq-sku > span{color:var(--accent-ink);font-size:12px;font-weight:700;letter-spacing:.07em;line-height:1.3;text-transform:uppercase}
.eq-desc{margin-top:4px;font-size:var(--fs-sm);font-weight:500;letter-spacing:.02em;line-height:1.55;text-transform:uppercase;overflow-wrap:anywhere}
.eq-back{display:inline-flex;align-items:center;min-height:36px;margin-top:2px;font-size:var(--fs-ui)}

/* ── The topic's fields ───────────────────────────────────────────────── */
/* a hairline over each set; the legend floats so it sits under the rule
   instead of breaking it, and min-width:0 lets a set shrink at 320 */
.eq-set{min-width:0;margin:0;padding:20px 0 0;border:0;border-top:1px solid var(--line)}
.eq-set > legend{float:left;width:100%;margin:0 0 14px;padding:0;font-size:var(--fs-md);font-weight:800;letter-spacing:-.01em;line-height:1.3}
.eq-set > legend + *{clear:both}
.eq-set > legend ~ * + *{margin-top:18px}
.eq-set legend span{color:var(--muted);font-weight:500;letter-spacing:0}
/* the account wanted: a radio group under a label-weight legend, 44px rows;
   each kind's name, then what it is in the muted small type */
.eq-choice{min-width:0;margin:0;padding:0;border:0}
.eq-choice > legend{padding:0;margin:0 0 4px;font-weight:700}
.eq-radio{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;font-weight:500;line-height:1.4;cursor:pointer}
.eq-radio + .eq-radio{border-top:1px solid var(--line)}
.eq-radio input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--petrol);cursor:pointer}
.eq-radio b{display:block;font-weight:700}
.eq-radio small{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-sm);line-height:1.45}

/* a return: what the Trading page asks for first, under the two numbers */
.eq-note{padding:12px 14px;border-left:3px solid var(--ink);background:var(--sage-light);font-size:var(--fs-sm);line-height:1.5}
.eq-note .tlink{white-space:nowrap}

/* photos of the old part: a dashed drop area with an outlined button */
.fld-hint{margin:-2px 0 8px;color:var(--muted);font-size:var(--fs-sm);line-height:1.45}
.eq-file{display:block;width:100%;max-width:100%;padding:8px;border:1px dashed var(--field-line);border-radius:var(--r);background:var(--white);color:var(--ink);font:inherit;font-size:var(--fs-ui);font-weight:500;cursor:pointer}
.eq-file::file-selector-button{min-height:40px;margin-right:14px;padding:0 16px;border:0;border-radius:var(--r);background:transparent;box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;transition:background-color .15s,color .15s}
.eq-file:hover::file-selector-button{background:var(--ink);color:var(--white)}
.eq-file:focus-visible{outline:3px solid var(--petrol);outline-offset:2px}
.fld-note{margin-top:8px;font-size:var(--fs-sm);font-weight:600;line-height:1.45}

/* ── A field the server turned down ───────────────────────────────────── */
/* the alert red (7.6:1 on white), marked as the flash errors are, so it is
   told apart by more than its colour */
.fld-err{display:flex;align-items:flex-start;gap:8px;margin-top:8px;color:var(--alert);font-size:var(--fs-ui);font-weight:600;line-height:1.4}
.fld-err::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:var(--r);background:var(--alert);color:var(--white);font-size:12px;font-weight:800;line-height:1}
/* scroll-margin: when autofocus scrolls to the field, its message under it
   comes into view too (the field alone can land on a phone's last line) */
.eq-form [aria-invalid="true"]{border-color:var(--alert);box-shadow:inset 0 0 0 1px var(--alert);scroll-margin:24px 0 96px}
.eq-form [aria-invalid="true"]:focus{outline:3px solid var(--petrol);outline-offset:2px}

/* ── Trade accounts: the two kinds side by side ───────────────────────── */
/* the Trading page's cards (.tp-cards), each ending in its own button; the
   buttons line up along the pair's foot however long each list runs */
.site .login-intro h2{font-size:var(--fs-h3);letter-spacing:-.018em;line-height:1.15}
.login-intro .note{max-width:62ch;margin-top:8px;color:var(--muted);font-size:var(--fs-ui);line-height:1.5}
.login-opts{margin-bottom:0}
.login-opts .panel-box{display:flex;flex-direction:column}
.site .login-opts .login-go{margin-top:auto;padding-top:24px}
.login-more{margin-top:12px}
.login-more .tlink{display:inline-flex;align-items:center;min-height:44px}
/* with the sign-in preview on: the sign-in a third, the two kinds two thirds,
   the headings level; under 1181 they stack, sign-in first */
@media (min-width:1181px){
  .login-grid.has-signin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;align-items:start}
  .login-grid.has-signin .login-intro{padding-top:33px}
}
@media (max-width:1180px){
  .login-grid.has-signin > * + *{margin-top:40px}
}

/* ── Phones ───────────────────────────────────────────────────────────── */
@media (max-width:760px){
  .eq-part{grid-template-columns:64px minmax(0,1fr);gap:12px}
  .eq-thumb{width:64px;height:64px}
  .eq-sku b{font-size:18px}
  .eq-back{min-height:44px;margin-top:0}
  .eq-file::file-selector-button{min-height:44px}
  /* the note's link on its own line under the sentence, 44px tall and only as
     wide as its words, so it never reaches over the text above; it takes the
     note's bottom padding instead of adding its own */
  .eq-note .tlink{display:flex;align-items:center;width:fit-content;min-height:44px;margin-bottom:-12px}
  .site .login-intro h2{font-size:22px}
  .login-go .btn{width:100%}
}
/* 320: each label on one line ("Register as a trade customer" is the longest);
   the buttons run full width there, so the arrow can go */
@media (max-width:360px){
  .login-go .btn{padding-inline:16px}
  .login-go .btn svg{display:none}
}

/* ── Contact: the return note's link to the sales team ────────────────── */
/* "ask your salesperson", inside the note's sentence: underlined as a text link,
   and on phones a 44px hit area that does not move the lines */
.eq-inline{font-weight:700;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:4px}
.eq-inline:hover{text-decoration-color:currentColor}

/* ── Contact: talk to our sales team ──────────────────────────────────── */
/* Under the form and the branch card, full width: a white card per person (the
   form's panel), the photo on top, the name, then the mobile and the email as
   44px link rows written out in full. Four across from 1024 (tighter below 1240,
   where an email breaks after its @, a <wbr> in contact.html); two across below
   that and one on phones, each card with the photo beside the name and the links
   under both. */
.team{margin-top:56px}
.site .team h2{padding-bottom:14px;border-bottom:var(--rule-heavy);font-size:clamp(26px,2.2vw,30px);letter-spacing:var(--track-tight);line-height:1.1}
.team-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:24px 0 0;padding:0;list-style:none}
.team-card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"photo" "name" "ways";align-content:start;min-width:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.team-card img{grid-area:photo;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--white)}
.site .team-card h3{grid-area:name;margin:0;padding:18px 20px 0;font-size:20px;letter-spacing:-.018em;line-height:1.2;overflow-wrap:anywhere}
.team-ways{grid-area:ways;margin:10px 20px 12px;padding:0;list-style:none;border-top:2px solid var(--ink)}
.team-ways li + li{border-top:1px solid var(--line)}
.team-ways a{display:flex;align-items:center;gap:10px;min-height:44px;padding-block:4px;font-size:var(--fs-ui);font-weight:700;line-height:1.3;text-decoration:none}
.team-ways a > span{min-width:0;overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:5px}
.team-ways a:hover > span{text-decoration-color:currentColor}
.team-ways svg{width:18px;height:18px;flex:none;color:var(--petrol)}
@media (max-width:1239px){
  .team-list{gap:16px}
  .site .team-card h3{padding:16px 16px 0}
  .team-ways{margin:10px 16px 10px}
}
@media (max-width:1023px){
  .team-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team-card{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"photo name" "ways ways";align-items:center;column-gap:16px;padding:16px 20px 8px}
  .team-card img{width:96px;border:1px solid var(--line);border-radius:var(--r)}
  .site .team-card h3{padding:0}
  .team-ways{margin:16px 0 0}
}
@media (max-width:760px){
  .eq-inline{padding-block:13px}
  .team{margin-top:40px}
  .team-list{grid-template-columns:minmax(0,1fr);gap:12px}
  .team-card{grid-template-columns:80px minmax(0,1fr);padding:16px 16px 4px}
  .team-card img{width:80px}
}