/* SDK Motors — the one request form (assets/lead.js), in the dialog and in the
   page. Self-contained: it relies only on the colour and spacing tokens every
   page defines, so the home page (its own inline styles) and the car pages
   (style.css + model.css) show exactly the same form. */

html.lead-open{overflow:hidden}

/* ---- the dialog ---- */
.lead-dlg{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;
  border:1px solid var(--color-concrete);border-radius:var(--radius-cards);
  background:var(--color-chalk);color:var(--color-graphite);overflow:auto;overscroll-behavior:contain}
.lead-dlg::backdrop{background:rgba(0,0,0,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lead-dlg[open]{animation:lead-in .28s cubic-bezier(.2,.8,.2,1)}
.lead-dlg[open]::backdrop{animation:lead-fade .28s ease}
@keyframes lead-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
@keyframes lead-fade{from{opacity:0}}
.lead-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;
  background:var(--color-concrete);color:var(--color-graphite);font-size:22px;line-height:1;cursor:pointer}
.lead-x:hover{background:var(--color-ash)}
.lead-dlg .lead-h{padding-right:36px}

/* ---- in the page: the same card, framed ---- */
.lead-box{border:1px solid var(--color-concrete);border-radius:var(--radius-cards);background:var(--color-chalk);
  color:var(--color-graphite)}

/* ---- the form ---- */
.lead-card,.lead-done{padding:var(--spacing-32)}
.lead-card[hidden],.lead-done[hidden]{display:none}
.lead-card{display:grid;gap:var(--spacing-16)}
.lead-h{font-size:var(--text-heading-sm);font-weight:var(--w-semibold);letter-spacing:-.01em;line-height:1.25;color:var(--color-graphite)}
.lead-sub{color:var(--color-steel);margin-top:-8px;font-size:var(--text-body);letter-spacing:normal}
.lead-f{display:grid;gap:var(--spacing-8)}
.lead-f>span{font-size:var(--text-fine);color:var(--color-steel);letter-spacing:normal}
.lead-f small{font-size:var(--text-fine);color:var(--color-fog);letter-spacing:normal}
.lead-in{width:100%;min-width:0;background:var(--color-paper);color:var(--color-graphite);
  border:1px solid var(--color-concrete);border-radius:var(--radius-inputs);
  padding:12px var(--spacing-16);font:inherit;font-size:var(--text-body-lg);letter-spacing:normal;
  transition:border-color .2s}
textarea.lead-in{resize:vertical;min-height:52px;line-height:1.4}
.lead-in::placeholder{color:var(--color-fog)}
.lead-in:focus{outline:none;border-color:var(--color-accent)}
.lead-in.bad{border-color:var(--color-accent-text)}
select.lead-in{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
select.lead-in:invalid,select.lead-in option[value=""]{color:var(--color-fog)}
select.lead-in:disabled{opacity:.55;cursor:not-allowed}
.lead-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-8)}
@media(max-width:560px){.lead-two{grid-template-columns:1fr}}

.lead-f>span i{font-style:normal;color:var(--color-fog)}
.lead-f>span b{font-weight:inherit}
.lead-f>span [hidden]{display:none}

/* how to reach the visitor: a phone with its messenger, or an email — either will do */
.lead-contact{border:0;margin:0;padding:0;min-width:0;display:grid;gap:var(--spacing-8)}
.lead-contact>legend{padding:0;margin-bottom:var(--spacing-8);font-size:var(--text-fine);color:var(--color-steel);letter-spacing:normal}
.lead-contact small{font-size:var(--text-fine);color:var(--color-fog);letter-spacing:normal}
.lead-or{display:flex;align-items:center;gap:var(--spacing-8);margin:4px 0;font-size:var(--text-fine);color:var(--color-fog);letter-spacing:normal}
.lead-or::before,.lead-or::after{content:"";flex:1;height:1px;background:var(--color-concrete)}

/* how to reach the visitor — chips */
.lead-ways{display:flex;flex-wrap:wrap;gap:var(--spacing-8)}
.lead-ways label{position:relative;cursor:pointer}
.lead-ways input{position:absolute;opacity:0;pointer-events:none}
.lead-ways b{display:block;white-space:nowrap;font-weight:var(--w-medium);font-size:var(--text-fine);letter-spacing:normal;
  padding:9px 14px;border:1px solid var(--color-concrete);border-radius:999px;color:var(--color-steel);transition:all .2s}
.lead-ways label:hover b{border-color:var(--color-steel);color:var(--color-graphite)}
.lead-ways input:checked+b{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}
.lead-ways input:focus-visible+b{outline:2px solid var(--color-graphite);outline-offset:2px}
.lead-ways.bad b{border-color:var(--color-accent-text)}

/* the trap for bots: out of sight and out of the tab order, a person never fills it */
.lead-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* a field's error, in red right under it (lead.js show()) */
.lead-card small.lead-err{display:block;font-size:var(--text-fine);line-height:1.35;color:var(--color-accent-text);letter-spacing:normal;margin-top:-2px}
.lead-card .lead-agree+small.lead-err{margin-top:-8px}
.lead-note{min-height:18px;font-size:var(--text-fine);color:var(--color-accent-text);letter-spacing:normal;margin:-4px 0 -8px}
.lead-note:empty{min-height:0;margin:0}

/* ---- buttons ---- */
.lead-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;
  padding:12px var(--spacing-24);border:0;border-radius:12px;cursor:pointer;text-decoration:none;
  font:inherit;font-size:var(--text-body);font-weight:var(--w-medium);letter-spacing:normal;
  transition:background .2s,transform .15s,border-color .2s}
.lead-btn:active{transform:scale(.98)}
.lead-btn:focus-visible{outline:2px solid var(--color-graphite);outline-offset:3px}
.lead-btn-main{background:var(--color-accent);color:var(--color-accent-ink)}
.lead-btn-main:hover{background:var(--color-accent-hover)}
.lead-send:disabled{opacity:.6;cursor:progress}

/* ---- after sending ---- */
.lead-done{text-align:center;display:grid;justify-items:center;gap:var(--spacing-16)}
.lead-done p{color:var(--color-steel);max-width:36ch;letter-spacing:normal}
.lead-done .lead-tg,.lead-done .lead-tg-bot{margin-top:var(--spacing-8)}
.lead-done .lead-btn[hidden]{display:none}
.lead-again{background:none;border:0;color:var(--color-steel);font:inherit;font-size:var(--text-fine);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px}
.lead-again:hover{color:var(--color-graphite)}
.lead-ok{width:56px;height:56px;border-radius:50%;background:var(--color-accent);position:relative;margin-top:var(--spacing-8)}
.lead-ok::after{content:"";position:absolute;left:20px;top:14px;width:12px;height:22px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.lead-done.fail .lead-ok{background:var(--color-concrete)}
.lead-done.fail .lead-ok::after{content:"!";border:0;transform:none;left:0;right:0;top:9px;width:auto;height:auto;
  text-align:center;font-size:28px;font-weight:700;color:var(--color-graphite)}

@media(max-width:560px){
  .lead-card,.lead-done{padding:var(--spacing-24)}
  .lead-ways{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}   /* one row, as many equal columns as chips */
  .lead-ways b{padding:9px 0;text-align:center;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.lead-dlg[open],.lead-dlg[open]::backdrop{animation:none}}

/* consent to personal data processing (152-FZ): unchecked by default, required */
.lead-agree{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:var(--text-fine);
  color:var(--color-fog);letter-spacing:normal;line-height:1.45}
.lead-agree input{flex:none;width:16px;height:16px;margin:1px 0 0;accent-color:var(--color-accent)}
.lead-agree input.bad{outline:2px solid var(--color-accent-text);outline-offset:1px}
.lead-agree a{color:var(--color-steel);text-decoration:underline}
.lead-agree a:hover{color:var(--color-graphite)}