/* Vistitio — strona dla krajów poza Polską (vistitio.com: /, /de/, /at/, /cs/, /sk/, /hu/, /ro/,
   /lt/, /hr/, /sl/, /uk/) oraz strona potwierdzenia zapisu (api/potwierdz.php).
   Wymiary, kolory i kroje 1:1 z makietą „Vistitio Landing Zagranica.dc.html” (handoff v70,
   desktop 1440 / mobile 390). Progi z makiety: mobile < 820 px, tablet < 1100 px.
   Bez site.css: tu są tylko reguły bazowe, których potrzebują ta strona i consent.css. */

/* ---------- baza (globalne reguły makiety + to, czego oczekuje consent.css) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Reset elementów bez wagi (:where): style z klasą — przyciski banera ciasteczek z consent.css — zawsze wygrywają (10.10: „.zg button” zjadał tło i ramkę „Accept all”). */
body.zg{margin:0;background:#F5F7FA;font-family:Manrope,system-ui,sans-serif;color:#1E2B45}
:where(.zg) a{color:#1E2B45}
:where(.zg) input,:where(.zg) button,:where(.zg) select{font-family:inherit}
:where(.zg) input:focus,:where(.zg) select:focus{outline:none}
:where(.zg) button{color:inherit;background:none;border:0;cursor:pointer;padding:0}
:where(.zg) h1,:where(.zg) h2,:where(.zg) h3,:where(.zg) p{margin:0}
:where(.zg) svg{display:block}
.zg [hidden]{display:none!important}
.zg :focus-visible{outline:2px solid #2F6BB3;outline-offset:2px}
.zg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes zg-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- układ ---------- */
.zg-root{min-height:100vh;background:#F5F7FA;display:flex;flex-direction:column}

/* nagłówek */
.zg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px 40px;max-width:1240px;width:100%;margin:0 auto}
.zg-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.zg-brand svg{width:32px;height:32px}
.zg-brand span{font-family:Outfit,Manrope,sans-serif;font-weight:600;font-size:24px;letter-spacing:-.04em;color:#1E2B45}
.zg-head-r{display:flex;align-items:center;gap:16px}
.zg .zg-pl{display:flex;font-size:14px;font-weight:700;color:#34425C;text-decoration:none}
.zg .zg-pl:hover{text-decoration:underline}
.zg-lang{position:relative;display:flex;align-items:center}
.zg-lang select{appearance:none;-webkit-appearance:none;height:40px;padding:0 32px 0 12px;border-radius:10px;border:1.5px solid #D5DCE6;background:#fff;color:#1E2B45;font-size:13.5px;font-weight:700;cursor:pointer}
.zg-arrow{position:absolute;right:16px;pointer-events:none;font-size:12px;color:#5B6B85}
.zg-arrow--sm{right:11px;font-size:11px}

/* treść: bohater po lewej, karta po prawej (dwa wiersze), etapy i liczby pod bohaterem */
.zg-main{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:32px 40px 72px;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:40px 72px;align-items:start}
.zg-hero{display:flex;flex-direction:column;gap:22px;min-width:0;grid-row:1}
.zg-pill{display:flex;align-items:center;gap:8px;width:fit-content;height:32px;padding:0 12px;border-radius:16px;background:#FBEEDC;color:#7A4B0C;font-size:13px;font-weight:800}
.zg-pill-dot{width:8px;height:8px;border-radius:50%;background:#2E7D4F;box-shadow:0 0 0 3px rgba(46,125,79,.18);flex-shrink:0}
.zg-h1{font-family:Outfit,Manrope,sans-serif;font-weight:600;font-size:64px;line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.zg-lead{font-size:18px;line-height:1.55;color:#34425C;max-width:560px;text-wrap:pretty}

/* ---------- karta z formularzem ---------- */
.zg-aside{grid-row:1 / span 2;grid-column:2;min-width:0}
.zg-card{background:#fff;border-radius:24px;border:1px solid #E9EDF2;box-shadow:0 20px 48px rgba(30,43,69,.08);padding:32px;display:flex;flex-direction:column;gap:18px}
.zg-form{display:flex;flex-direction:column;gap:18px}
.zg-form-head{display:flex;flex-direction:column;gap:6px}
.zg-h2{font-family:Outfit,Manrope,sans-serif;font-weight:600;font-size:26px;letter-spacing:-.025em;line-height:1.15}
.zg-sub{font-size:14px;line-height:1.55;color:#5B6B85}
.zg-field{display:flex;flex-direction:column;gap:6px}
.zg-field--gap8{gap:8px}
.zg-label{font-size:13px;font-weight:800}
.zg-label-row{display:flex;justify-content:space-between;gap:8px}
.zg-hint{font-size:12px;color:#5B6B85}
.zg-hint.is-off{visibility:hidden}
.zg-input{width:100%;height:54px;border-radius:14px;border:1.5px solid #B9C4D3;background:#fff;color:#1E2B45;padding:0 16px;font-size:16px}
.zg-input:focus{border:2px solid #1E2B45}
.zg-input.is-err{border:2px solid #8E2A24}
.zg-sel{position:relative;display:flex;align-items:center}
.zg-select{appearance:none;-webkit-appearance:none;padding:0 40px 0 16px;cursor:pointer}

/* Kupuję / Sprzedaję / Oba: prawdziwe radio pod przyciskiem z makiety */
.zg-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:#E9EDF2;border-radius:14px;padding:4px}
.zg-seg-o{position:relative;display:block;min-width:0}
.zg-seg-o input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.zg-seg-o span{display:grid;place-items:center;height:44px;border-radius:11px;color:#1E2B45;font-size:14px;font-weight:800;cursor:pointer;text-align:center}
.zg-seg-o input:checked+span{background:#fff;box-shadow:0 1px 3px rgba(30,43,69,.14)}
.zg-seg-o input:focus-visible+span{outline:2px solid #2F6BB3;outline-offset:2px}

/* checkboxy „firma” i zgoda: prawdziwy input pod kwadratem 24 px z makiety */
.zg-checks{display:flex;flex-direction:column;gap:4px}
.zg-check{position:relative;display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:8px 0;color:#1E2B45;cursor:pointer;text-align:left}
.zg-check input{position:absolute;left:0;top:8px;width:24px;height:24px;margin:0;opacity:0;cursor:pointer}
.zg-box{width:24px;height:24px;border-radius:7px;flex-shrink:0;border:2px solid #B9C4D3;background:#fff;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800}
.zg-check input:checked+.zg-box{border-color:#1E2B45;background:#1E2B45}
.zg-check input:checked+.zg-box::after{content:'✓'}
.zg-check input:focus-visible+.zg-box{outline:2px solid #2F6BB3;outline-offset:2px}
.zg-check.is-err .zg-box{border-color:#8E2A24}
.zg-check-t{font-size:14px;line-height:1.45;padding-top:2px}
.zg-check-t--sm{font-size:13px;line-height:1.5;color:#34425C;text-wrap:pretty}
.zg-check-t a{font-weight:800;color:#1E2B45;position:relative;z-index:1}
.zg-muted{color:#5B6B85}
.zg-err{display:block;font-size:12.5px;font-weight:700;color:#8E2A24}
.zg-err--consent{padding-left:36px}

.zg-submit{min-height:56px;border-radius:16px;border:none;background:#1E2B45;color:#fff;font-size:16px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.zg .zg-submit{background:#1E2B45;color:#fff}
.zg .zg-submit:hover{background:#2A3A5C}
.zg .zg-submit:disabled{cursor:progress}
.zg-free{font-size:12.5px;line-height:1.5;color:#5B6B85;text-align:center}
.zg-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- po zapisie ---------- */
.zg-done{display:flex;flex-direction:column;gap:16px;animation:zg-pop .25s}
.zg-done-ok{width:56px;height:56px;border-radius:50%;background:#EEF6F1;color:#2E7D4F;display:grid;place-items:center;font-size:26px;font-weight:800}
.zg-done-h{font-family:Outfit,Manrope,sans-serif;font-weight:600;font-size:28px;letter-spacing:-.025em;line-height:1.15}
.zg-done-h:focus{outline:none}
.zg-done-p{font-size:15px;line-height:1.55;color:#34425C;text-wrap:pretty}
.zg-done-p b{color:#1E2B45}
.zg-share{border-radius:16px;background:#F5F7FA;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.zg-share-h{font-size:13.5px;font-weight:800}
.zg-share-row{display:flex;gap:8px}
.zg-share-url{flex:1;min-width:0;height:44px;border-radius:12px;border:1.5px solid #D5DCE6;background:#fff;display:flex;align-items:center;padding:0 12px;font-size:13.5px;color:#5B6B85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zg .zg-share-btn{height:44px;padding:0 16px;border-radius:12px;border:none;background:#1E2B45;color:#fff;font-size:13.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.zg .zg-again{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:0;border:none;background:transparent;color:#1E2B45;font-size:14px;font-weight:700;text-decoration:underline;cursor:pointer}

/* strona potwierdzenia (api/potwierdz.php): ta sama karta, sama na środku */
.zg-main--solo{display:flex;justify-content:center;align-items:flex-start}
.zg-card--solo{width:100%;max-width:480px}
.zg-card--solo form{margin:0}

/* ---------- etapy i liczby ---------- */
.zg-info{grid-row:2;display:flex;flex-direction:column;gap:28px;min-width:0}
.zg-roll{display:flex;flex-direction:column;gap:14px}
.zg-eyebrow{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5B6B85}
.zg-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.zg-step{border-radius:18px;background:#fff;color:#1E2B45;padding:18px;display:flex;flex-direction:column;gap:6px;border:1px solid #E9EDF2}
.zg-step-tag{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#5B6B85}
.zg-step-n{width:22px;height:22px;border-radius:50%;background:#E9EDF2;color:#1E2B45;display:grid;place-items:center;font-size:11.5px;letter-spacing:0}
.zg-step-t{font-family:Outfit,Manrope,sans-serif;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.zg-step-d{font-size:13.5px;line-height:1.5;color:#5B6B85;text-wrap:pretty}
.zg-step--now{background:#1E2B45;color:#fff;border-color:#1E2B45}
.zg-step--now .zg-step-tag{color:#E0AB4A}
.zg-step--now .zg-step-n{background:#E0AB4A;color:#1E2B45}
.zg-step--now .zg-step-d{color:#C9D2DE}
.zg-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#E9EDF2;border-radius:18px;overflow:hidden;border:1px solid #E9EDF2}
.zg-fact{background:#fff;padding:18px;display:flex;flex-direction:column;gap:4px}
.zg-fact-v{font-family:Outfit,Manrope,sans-serif;font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1}
.zg-fact-k{font-size:13.5px;line-height:1.45;color:#34425C;text-wrap:pretty}

/* ---------- stopka ---------- */
.zg-foot{border-top:1px solid #E3E8EF;background:#fff}
.zg-foot-in{max-width:1240px;margin:0 auto;padding:20px 40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;font-size:13px;color:#5B6B85}
.zg-foot-nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.zg .zg-foot-nav a{color:#34425C;text-decoration:none;min-height:32px;display:flex;align-items:center}
.zg .zg-foot-nav a:hover{text-decoration:underline}

/* ---------- tablet: 820–1099 px ---------- */
@media (max-width:1099.98px){
  .zg-main{grid-template-columns:minmax(0,1fr) 400px;gap:40px 40px}
  .zg-h1{font-size:52px}
  .zg-steps{grid-template-columns:minmax(0,1fr)}
}

/* ---------- mobile: < 820 px (karta pod nagłówkiem, etapy pod kartą) ---------- */
@media (max-width:819.98px){
  .zg-head{padding:16px 20px}
  .zg .zg-pl{display:none}
  .zg-main{padding:8px 20px 40px;grid-template-columns:minmax(0,1fr);gap:28px}
  .zg-hero{gap:16px}
  .zg-h1{font-size:38px}
  .zg-lead{font-size:16px}
  .zg-aside{grid-row:2;grid-column:1}
  .zg-info{grid-row:3;gap:24px}
  .zg-card{padding:22px 20px}
  .zg-steps,.zg-facts{grid-template-columns:minmax(0,1fr)}
  .zg-foot-in{padding:20px}
  .zg-main--solo{padding-top:8px}
}