/* VISEE B2B 2.0.67 — kod QR „Dobierz wycieraczkę”: strona publiczna dla kierowców (/dobierz/<token>, mobile-first),
   plakat do druku (A4 i karta A6 na ladę) w portalu klienta. Tokeny kolorów z visee.css. */

/* ===================== strona publiczna ===================== */
body.dq-strona { background: var(--bg-app); min-height: 100vh; }
.dq-top { background: var(--navy); color: #fff; }
.dq-top-in { max-width: 720px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dq-top img { height: 28px; width: auto; display: block; }
.dq-top .select { width: auto; min-width: 0; height: 34px; font-size: 13px; padding-top: 4px; padding-bottom: 4px; background-color: #fff; }
.dq-main { max-width: 720px; margin: 0 auto; padding: 14px 16px 32px; }
.dq-sklep { padding: 12px 14px; margin-bottom: 14px; }
.dq-sklep .dq-eyebrow { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.dq-sklep .dq-nazwa { font-size: 18px; font-weight: 600; color: var(--navy-title); margin: 2px 0 4px; overflow-wrap: anywhere; }
.dq-sklep .dq-kontakt { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--text-p); }
.dq-sklep .dq-kontakt a { color: var(--blue-700); font-weight: 600; text-decoration: none; }
.dq-h1 { font-size: 22px; line-height: 1.25; margin: 4px 0 6px; color: var(--navy-title); }
.dq-sub { margin: 0 0 14px; color: var(--text-p); font-size: 15px; }
.dq-form { display: grid; gap: 12px; padding: 14px; margin-bottom: 16px; }
.dq-form .select { height: 48px; font-size: 16px; }          /* 16 px: iOS nie powiększa strony przy wyborze */
.dq-form .field > label { font-size: 14px; }
.dq-wyniki-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 4px 0 10px; }
.dq-wyniki-head h2 { font-size: 17px; margin: 0; color: var(--navy-title); }
.dq-zestaw { margin-bottom: 12px; overflow: hidden; }
.dq-zestaw-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-section); }
.dq-zestaw-head b { font-size: 15px; color: var(--navy-title); }
.dq-zestaw-head .dq-meta { font-size: 13px; color: var(--muted); }
.dq-linia { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; background: var(--blue-700); letter-spacing: .02em; }
.dq-poz { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); align-items: start; }
.dq-poz:last-of-type { border-bottom: 0; }
.dq-poz .pimg { width: 72px; height: 72px; }
.dq-poz-nazwa { font-size: 14px; color: var(--text-2); margin: 0 0 4px; overflow-wrap: anywhere; }
.dq-strona-tag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--blue-800); background: var(--blue-50); border-radius: 6px; padding: 2px 8px; margin: 0 6px 6px 0; }
.dq-kod { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dq-kod b { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--navy-title); letter-spacing: .02em; }
.dq-kod .dq-ile { font-size: 14px; font-weight: 600; color: var(--text-2); }
.dq-cena { font-size: 14px; color: var(--text-2); margin-top: 4px; }
.dq-zestaw-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: var(--bg-section); border-top: 1px solid var(--border); }
.dq-zestaw-foot .btn { min-height: 44px; }
.dq-info { padding: 14px; font-size: 14px; color: var(--text-p); }
.dq-stopka { max-width: 720px; margin: 0 auto; padding: 0 16px 24px; font-size: 12px; color: var(--muted); text-align: center; }
.dq-blad { text-align: center; padding: 28px 18px; }
.dq-blad h1 { font-size: 20px; margin: 10px 0 6px; color: var(--navy-title); }

/* „Pokaż sprzedawcy” — duże kody na cały ekran telefonu */
.dq-ekran { position: fixed; inset: 0; z-index: 1000; background: #fff; display: flex; flex-direction: column; padding: 18px 16px; overflow: auto; }
.dq-ekran h2 { font-size: 16px; color: var(--muted); margin: 0 0 4px; font-weight: 600; }
.dq-ekran .dq-auto { font-size: 18px; font-weight: 600; color: var(--navy-title); margin: 0 0 16px; }
.dq-ekran ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dq-ekran li { border: 2px solid var(--navy-title); border-radius: 12px; padding: 12px 14px; }
.dq-ekran li b { display: block; font-family: var(--mono); font-size: 30px; line-height: 1.15; color: var(--navy-title); overflow-wrap: anywhere; }
.dq-ekran li span { font-size: 15px; color: var(--text-p); }
.dq-ekran .btn { margin-top: 18px; min-height: 48px; }

/* ===================== plakat (podgląd w portalu i wydruk) ===================== */
.dq-plakat { box-sizing: border-box; background: #fff; color: #001731; display: flex; flex-direction: column; align-items: center; text-align: center; font-family: var(--font); }
.dq-plakat .dq-p-logo { width: 46%; max-width: 360px; height: auto; }
.dq-plakat .dq-p-haslo { font-weight: 700; line-height: 1.15; margin: 0; }
.dq-plakat .dq-p-qr { display: block; }
.dq-plakat .dq-p-qr svg { display: block; width: 100%; height: 100%; }
.dq-plakat .dq-p-kroki { font-weight: 500; color: #1F2937; margin: 0; }
.dq-plakat .dq-p-sklep { font-weight: 700; color: #004493; margin: 0; overflow-wrap: anywhere; }
.dq-plakat .dq-p-url { font-family: var(--mono); color: #5B6472; margin: 0; overflow-wrap: anywhere; }
.dq-plakat .dq-p-pasek { width: 100%; height: 10px; background: linear-gradient(90deg, #004493, #06B6D4); border-radius: 5px; }

/* podgląd na ekranie (proporcje A4) */
.dq-podglad { width: 100%; max-width: 340px; aspect-ratio: 210 / 297; margin: 0 auto; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--sh-sm); padding: 18px 16px; justify-content: space-between; gap: 8px; }
.dq-podglad .dq-p-haslo { font-size: 17px; }
.dq-podglad .dq-p-qr { width: 58%; aspect-ratio: 1; }
.dq-podglad .dq-p-kroki { font-size: 10px; }
.dq-podglad .dq-p-sklep { font-size: 12px; }
.dq-podglad .dq-p-url { font-size: 7px; }
.dq-podglad .dq-p-pasek { height: 5px; }

#dq-wydruk { display: none; }
.dq-qr-mini { width: 132px; height: 132px; border: 1px solid var(--border); border-radius: 8px; padding: 4px; background: #fff; flex: 0 0 auto; }
.dq-qr-mini svg { display: block; width: 100%; height: 100%; }
.dq-staty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.dq-staty div { background: var(--bg-section); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.dq-staty b { display: block; font-size: 22px; color: var(--navy-title); }
.dq-staty span { font-size: 12px; color: var(--muted); }

@media (min-width: 560px) {
  .dq-h1 { font-size: 26px; }
  .dq-form { grid-template-columns: 1fr 1fr 1fr; align-items: end; }
}

@media print {
  body.dq-drukuj { background: #fff !important; }
  body.dq-drukuj > *:not(#dq-wydruk) { display: none !important; }
  body.dq-drukuj #dq-wydruk { display: flex !important; }
  #dq-wydruk { width: 100%; height: 100vh; justify-content: space-between; padding: 14mm 14mm 12mm; gap: 6mm; break-inside: avoid; page-break-after: avoid; }
  #dq-wydruk .dq-p-haslo { font-size: 30pt; }
  #dq-wydruk .dq-p-qr { width: 120mm; height: 120mm; }
  #dq-wydruk .dq-p-kroki { font-size: 15pt; }
  #dq-wydruk .dq-p-sklep { font-size: 18pt; }
  #dq-wydruk .dq-p-url { font-size: 9pt; }
  #dq-wydruk.dq-plakat--a6 { padding: 6mm 6mm 5mm; gap: 2.5mm; }
  #dq-wydruk.dq-plakat--a6 .dq-p-logo { width: 52%; }
  #dq-wydruk.dq-plakat--a6 .dq-p-haslo { font-size: 13pt; }
  #dq-wydruk.dq-plakat--a6 .dq-p-qr { width: 66mm; height: 66mm; }
  #dq-wydruk.dq-plakat--a6 .dq-p-kroki { font-size: 7.5pt; }
  #dq-wydruk.dq-plakat--a6 .dq-p-sklep { font-size: 9.5pt; }
  #dq-wydruk.dq-plakat--a6 .dq-p-url { font-size: 6pt; }
  #dq-wydruk.dq-plakat--a6 .dq-p-pasek { height: 5px; }
  #dq-wydruk * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}