/* Formularz wyceny pojazdu — wspoldzielony przez index.html i oferta.html.
   Wczesniej byl skopiowany w obu plikach i kopie sie rozjechaly. */

.wyf-overlay{ position:fixed; inset:0; background:rgba(20,20,19,.62); backdrop-filter:blur(3px);
              display:none; align-items:flex-start; justify-content:center; z-index:900;
              padding:24px 16px; overflow-y:auto; }
.wyf-overlay.open{ display:flex; }
.wyf{ background:var(--white,#fff); border-radius:18px; width:100%; max-width:640px; overflow:hidden;
      box-shadow:0 24px 70px rgba(0,0,0,.28); margin:auto; }

/* --- naglowek z postepem --- */
.wyf-head{ padding:22px 26px 0; }
.wyf-head-top{ display:flex; align-items:flex-start; gap:14px; }
.wyf-head h3{ font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:700; line-height:1.25;
              letter-spacing:-.01em; flex:1; }
.wyf-x{ flex:none; width:34px; height:34px; border:0; background:var(--paper,#FAFAF9); border-radius:9px;
        color:var(--graphite,#6B6B6A); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.wyf-x:hover{ background:#EFEFEC; color:var(--ink,#1F1F1E); }
.wyf-x svg{ width:15px; height:15px; }

.wyf-steps{ display:flex; gap:8px; margin:20px 0 0; }
.wyf-step{ flex:1; }
.wyf-step-bar{ height:4px; border-radius:3px; background:var(--line,#E4E4E1); transition:background .25s ease; }
.wyf-step.done .wyf-step-bar, .wyf-step.on .wyf-step-bar{ background:var(--acid,#00A768); }
.wyf-step-lab{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
               color:var(--graphite,#6B6B6A); margin-top:7px; }
.wyf-step.on .wyf-step-lab{ color:var(--ink,#1F1F1E); }

.wyf-body{ padding:22px 26px 26px; }
.wyf-intro{ font-size:13.5px; color:var(--graphite,#6B6B6A); line-height:1.6; margin-bottom:18px; }

.wyf-pane{ display:none; }
.wyf-pane.on{ display:block; }

/* --- pola --- */
.wyf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .wyf-grid{ grid-template-columns:1fr; } }
.wyf-f{ margin-bottom:14px; }
.wyf-f label{ display:block; font-size:12px; font-weight:600; color:var(--charcoal,#3C3C3B); margin-bottom:6px; }
.wyf-f .req{ color:var(--acid-dark,#00875A); }
/* type=text + inputmode zamiast type=number: bez strzalek spinnera,
   ktore w tym formularzu wygladaly amatorsko */
.wyf-f input[type=text], .wyf-f input[type=tel], .wyf-f input[type=email]{
  width:100%; padding:12px 14px; border:1.5px solid var(--line,#E4E4E1); border-radius:10px;
  font-family:inherit; font-size:14.5px; color:var(--ink,#1F1F1E); background:var(--white,#fff); }
.wyf-f input:focus{ outline:none; border-color:var(--acid,#00A768); box-shadow:0 0 0 3px rgba(0,167,104,.12); }
.wyf-f input::placeholder{ color:#A9A9A6; }
.wyf-f .hint{ font-size:12px; color:var(--graphite,#6B6B6A); margin-top:6px; line-height:1.5; }
.wyf-f.bad input{ border-color:#D64545; }
.wyf-f .bad-msg{ display:none; font-size:12px; color:#D64545; margin-top:5px; }
.wyf-f.bad .bad-msg{ display:block; }
.wyf-suffix{ position:relative; }
.wyf-suffix .unit{ position:absolute; right:14px; top:50%; transform:translateY(-50%);
                   font-size:13px; color:var(--graphite,#6B6B6A); pointer-events:none; }
.wyf-suffix input{ padding-right:44px !important; }

/* --- kafelki wyboru zamiast <select> --- */
.wyf-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.wyf-chip{ border:1.5px solid var(--line,#E4E4E1); background:var(--white,#fff); border-radius:10px;
           padding:9px 15px; font-family:inherit; font-size:13.5px; font-weight:500;
           color:var(--charcoal,#3C3C3B); cursor:pointer; transition:all .15s ease; }
.wyf-chip:hover{ border-color:var(--graphite,#6B6B6A); }
.wyf-chip.on{ background:var(--ink,#1F1F1E); border-color:var(--ink,#1F1F1E); color:#fff; font-weight:600; }

/* --- strefa zdjec --- */
.wyf-drop{ border:1.5px dashed var(--line,#E4E4E1); border-radius:12px; padding:26px 20px; text-align:center;
           cursor:pointer; transition:all .16s ease; background:var(--paper,#FAFAF9); }
.wyf-drop:hover, .wyf-drop.over{ border-color:var(--acid,#00A768); background:var(--acid-soft,#E8F5EF); }
.wyf-drop-ico{ width:38px; height:38px; margin:0 auto 10px; border-radius:10px; background:var(--white,#fff);
               border:1px solid var(--line,#E4E4E1); display:flex; align-items:center; justify-content:center;
               color:var(--acid-dark,#00875A); }
.wyf-drop-ico svg{ width:18px; height:18px; }
.wyf-drop-t{ font-size:14px; font-weight:600; color:var(--ink,#1F1F1E); }
.wyf-drop-s{ font-size:12.5px; color:var(--graphite,#6B6B6A); margin-top:4px; }
.wyf-thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; margin-top:12px; }
.wyf-thumb{ position:relative; aspect-ratio:4/3; border-radius:9px; overflow:hidden; border:1px solid var(--line,#E4E4E1); }
.wyf-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.wyf-thumb button{ position:absolute; top:4px; right:4px; width:22px; height:22px; border:0; border-radius:6px;
                   background:rgba(20,20,19,.72); color:#fff; cursor:pointer; font-size:13px; line-height:1;
                   display:flex; align-items:center; justify-content:center; }
.wyf-thumb button:hover{ background:#D64545; }

/* --- podsumowanie na ostatnim kroku --- */
.wyf-sum{ background:var(--acid-soft,#E8F5EF); border:1px solid #CFE9DE; border-radius:12px;
          padding:15px 17px; margin-bottom:18px; }
.wyf-sum-lab{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
              color:var(--acid-dark,#00875A); }
.wyf-sum-car{ font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:700;
              color:var(--ink,#1F1F1E); margin-top:4px; }
.wyf-sum-meta{ font-size:12.5px; color:var(--charcoal,#3C3C3B); margin-top:3px; }

/* --- stopka z nawigacja --- */
.wyf-foot{ display:flex; gap:10px; align-items:center; margin-top:22px; padding-top:18px;
           border-top:1px solid var(--line,#E4E4E1); }
.wyf-btn{ border:0; border-radius:11px; padding:13px 22px; font-family:inherit; font-size:14.5px;
          font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.wyf-btn-primary{ background:var(--acid,#00A768); color:#fff; }
.wyf-btn-primary:hover{ background:var(--acid-dark,#00875A); }
.wyf-btn-primary[disabled]{ opacity:.6; cursor:default; }
.wyf-btn-ghost{ background:transparent; color:var(--graphite,#6B6B6A); padding-left:6px; padding-right:6px; }
.wyf-btn-ghost:hover{ color:var(--ink,#1F1F1E); }
.wyf-foot .grow{ flex:1; }
.wyf-btn svg{ width:16px; height:16px; }

/* --- pola opisowe (uszkodzenia, naprawy) --- */
.wyf-ta{ width:100%; padding:11px 13px; border:1.5px solid var(--line,#E4E4E1); border-radius:10px;
         font-family:inherit; font-size:14px; line-height:1.55; color:var(--ink,#1F1F1E);
         background:var(--white,#fff); resize:vertical; }
.wyf-ta:focus{ outline:none; border-color:var(--acid,#00A768); box-shadow:0 0 0 3px rgba(0,167,104,.12); }
.wyf-ta::placeholder{ color:#A9A9A6; }

/* --- pola z data: bez tego Safari renderuje je inaczej niz reszte --- */
.wyf-f input[type=date]{ width:100%; padding:11px 13px; border:1.5px solid var(--line,#E4E4E1);
  border-radius:10px; font-family:inherit; font-size:14.5px; color:var(--ink,#1F1F1E);
  background:var(--white,#fff); min-height:44px; }
.wyf-f input[type=date]:focus{ outline:none; border-color:var(--acid,#00A768); box-shadow:0 0 0 3px rgba(0,167,104,.12); }

/* --- cztery wymagane ujecia zdjec --- */
.wyf-ujecia{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:640px){ .wyf-ujecia{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:440px){ .wyf-ujecia{ grid-template-columns:repeat(2,1fr); } }

/* Licznik zdjec i informacja o brakach w zestawie podstawowym */
.wyf-uj-licznik{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
                 margin-top:10px; font-size:12px; color:var(--graphite,#6B6B6A); }
.wyf-uj-licznik .brak{ color:#9A6B00; font-weight:600; }
.wyf-uj-licznik .ok{ color:var(--acid-dark,#00875A); font-weight:600; }

/* Pierwsze cztery ujecia (zestaw partnera) wyrozniamy delikatnie */
.wyf-uj[data-uj="przod"], .wyf-uj[data-uj="tyl"],
.wyf-uj[data-uj="deska"], .wyf-uj[data-uj="fotele"]{ border-color:#C9D6CF; }
.wyf-uj{ position:relative; aspect-ratio:4/3; border:1.5px dashed var(--line,#E4E4E1); border-radius:11px;
         background:var(--paper,#FAFAF9); cursor:pointer; overflow:hidden;
         display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
         transition:border-color .16s ease, background .16s ease; }
.wyf-uj:hover{ border-color:var(--acid,#00A768); background:var(--acid-soft,#E8F5EF); }
.wyf-uj.ma{ border-style:solid; border-color:var(--acid,#00A768); background:var(--white,#fff); }
.wyf-uj img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wyf-uj-ico{ color:var(--graphite,#6B6B6A); }
.wyf-uj-ico svg{ width:20px; height:20px; }
.wyf-uj-lab{ position:relative; z-index:2; font-size:11px; font-weight:600; color:var(--charcoal,#3C3C3B);
             text-align:center; padding:0 4px; line-height:1.25; }
.wyf-uj.ma .wyf-uj-lab{ position:absolute; bottom:0; left:0; right:0; padding:5px 6px;
  background:linear-gradient(0deg, rgba(20,20,19,.78), rgba(20,20,19,0)); color:#fff; }
.wyf-uj-x{ position:absolute; top:5px; right:5px; z-index:3; width:22px; height:22px; border:0;
  border-radius:6px; background:rgba(20,20,19,.72); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.wyf-uj-x:hover{ background:#D64545; }
.wyf-uj-x svg{ width:11px; height:11px; }

/* --- dodatkowe adresy e-mail --- */
.wyf-add{ display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; padding:2px 0 0;
          font-family:inherit; font-size:13px; font-weight:600; color:var(--acid-dark,#00875A); cursor:pointer; }
.wyf-add:hover{ text-decoration:underline; }
.wyf-add svg{ width:15px; height:15px; }
.wyf-mail-row{ margin-top:12px; margin-bottom:0; }
.wyf-mail-in{ display:flex; gap:8px; align-items:center; }
.wyf-mail-in input{ flex:1; padding:12px 14px; border:1.5px solid var(--line,#E4E4E1); border-radius:10px;
                    font-family:inherit; font-size:14.5px; color:var(--ink,#1F1F1E); background:var(--white,#fff); }
.wyf-mail-in input:focus{ outline:none; border-color:var(--acid,#00A768); box-shadow:0 0 0 3px rgba(0,167,104,.12); }
.wyf-mail-row.bad input{ border-color:#D64545; }
.wyf-mail-x{ flex:none; width:38px; height:42px; border:1.5px solid var(--line,#E4E4E1); border-radius:10px;
             background:var(--white,#fff); color:var(--graphite,#6B6B6A); cursor:pointer;
             display:flex; align-items:center; justify-content:center; }
.wyf-mail-x:hover{ border-color:#D64545; color:#D64545; }
.wyf-mail-x svg{ width:14px; height:14px; }

.wyf-legal{ font-size:11.5px; color:var(--graphite,#6B6B6A); line-height:1.6; margin-top:14px; }
.wyf-legal a{ color:var(--acid-dark,#00875A); }
.wyf-err{ display:none; background:#FDECEC; border:1px solid #F5D2D2; color:#B23A3A;
          border-radius:10px; padding:11px 13px; font-size:13px; line-height:1.5; margin-top:14px; }
.wyf-err.on{ display:block; }

/* --- potwierdzenie --- */
.wyf-done{ text-align:center; padding:14px 4px 6px; }
.wyf-done-ico{ width:54px; height:54px; margin:0 auto 16px; border-radius:50%;
               background:var(--acid-soft,#E8F5EF); color:var(--acid-dark,#00875A);
               display:flex; align-items:center; justify-content:center; }
.wyf-done-ico svg{ width:25px; height:25px; }
.wyf-done h4{ font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:700; margin-bottom:9px; }
.wyf-done p{ font-size:14px; color:var(--charcoal,#3C3C3B); line-height:1.65; max-width:400px; margin:0 auto; }
.wyf-done .mail{ font-weight:600; color:var(--ink,#1F1F1E); }