/* ============================================================
   TALVEN — Formularz serwisowy (blok popup)
   Sekcja triggera + modal. Formularz w jasnym motywie (z prototypu).
   ============================================================ */

/* ---------- sekcja triggera na stronie ---------- */
.formularz-serwisowy{
  --fs-blue:#1E9DD9; --fs-blue-dark:#157bab; --fs-blue-tint:#eaf6fc;
  --fs-text:#171a1f; --fs-muted:#6b7280;
  font-family:'Montserrat',sans-serif;
}
.formularz-serwisowy .fs-cta{
  max-width:760px; margin:0 auto; text-align:center; padding:8px 16px;
}
.formularz-serwisowy .fs-eyebrow{
  font-size:11.5px; font-weight:700; color:var(--fs-blue-dark);
  letter-spacing:.09em; text-transform:uppercase; margin-bottom:10px;
}
.formularz-serwisowy .fs-title{ font-size:26px; font-weight:800; margin:0 0 10px; line-height:1.25; color:var(--fs-text); }
.formularz-serwisowy .fs-sub{ font-size:14px; color:var(--fs-muted); line-height:1.6; margin:0 auto 22px; max-width:520px; }
.formularz-serwisowy .fs-trigger{
  font-family:inherit; font-size:15px; font-weight:700; border:none; cursor:pointer;
  background:var(--fs-blue); color:#fff; border-radius:12px; padding:14px 30px;
  box-shadow:0 8px 20px -8px rgba(30,157,217,.6); transition:background .15s, transform .1s;
}
.formularz-serwisowy .fs-trigger:hover{ background:var(--fs-blue-dark); }
.formularz-serwisowy .fs-trigger:active{ transform:scale(.985); }

/* ---------- overlay / modal ---------- */
.tsf-overlay{
  position:fixed; inset:0; z-index:2000000000; /* ponad header#masthead (999999999 !important) */
  display:flex; align-items:flex-start; justify-content:center;
  padding:32px 16px; overflow-y:auto;
  background:rgba(12,16,22,.62); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .22s ease;
  font-family:'Montserrat',sans-serif;
}
.tsf-overlay.is-open{ opacity:1; }
.tsf-overlay[hidden]{ display:none !important; }

.tsf-dialog{
  --border:#e3e6eb; --border-strong:#d3d8e0; --panel-2:#f6f7f9;
  --blue:#1E9DD9; --blue-dark:#157bab; --blue-tint:#eaf6fc;
  --text:#171a1f; --muted:#6b7280; --muted-2:#9aa1ab;
  width:100%; max-width:640px; margin:auto;
  background:#fff; border-radius:16px;
  box-shadow:0 24px 60px -20px rgba(12,16,22,.5);
  transform:translateY(12px) scale(.985); transition:transform .22s cubic-bezier(.2,.7,.3,1);
  color:var(--text);
}
.tsf-overlay.is-open .tsf-dialog{ transform:none; }

.tsf-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:24px 26px 0;
}
.tsf-head .fs-eyebrow{ font-size:11.5px; font-weight:700; color:var(--blue-dark); letter-spacing:.09em; text-transform:uppercase; margin-bottom:6px; }
.tsf-head h2{ font-size:22px; font-weight:800; margin:0; line-height:1.25; color:var(--text); }
.tsf-head p{ font-size:13.5px; color:var(--muted); line-height:1.55; margin:8px 0 0; }
.tsf-close{
  flex-shrink:0; width:34px; height:34px; border-radius:9px; border:1px solid var(--border);
  background:var(--panel-2); color:var(--muted); font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s;
}
.tsf-close:hover{ background:#edeff2; color:var(--text); }

.tsf-body{ padding:20px 26px 26px; }

.tsf-sec{ margin-bottom:22px; }
.tsf-sec:last-of-type{ margin-bottom:0; }
.tsf-sec-head{ display:flex; align-items:baseline; gap:9px; margin-bottom:10px; }
.tsf-sec-num{
  width:22px; height:22px; border-radius:50%; background:var(--blue-tint); color:var(--blue-dark);
  font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.tsf-sec-title{ font-size:14.5px; font-weight:700; color:var(--text); }
.tsf-sec-hint{ font-size:12px; color:var(--muted-2); margin:2px 0 0 31px; line-height:1.5; }

.tsf-field{ margin-bottom:0; }
.tsf-body label.flabel{ display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.tsf-body label.flabel .opt{ font-weight:500; color:var(--muted-2); text-transform:none; letter-spacing:0; }

.tsf-body input[type=text],
.tsf-body input[type=tel],
.tsf-body input[type=email],
.tsf-body input[type=date],
.tsf-body textarea{
  width:100%; background:var(--panel-2); border:1.5px solid var(--border-strong); border-radius:10px;
  color:var(--text); font-family:inherit; font-size:14px; padding:11px 13px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.tsf-body input::placeholder, .tsf-body textarea::placeholder{ color:var(--muted-2); }
.tsf-body input:focus, .tsf-body textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint); }
.tsf-body textarea{ resize:vertical; min-height:96px; line-height:1.55; }

.tsf-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tsf-row2b{ display:grid; grid-template-columns:1.3fr 1fr; gap:12px; }
@media (max-width:520px){ .tsf-row2, .tsf-row2b{ grid-template-columns:1fr; } }
.tsf-stack > * + *{ margin-top:12px; }

.tsf-divider{ height:1px; background:var(--border); margin:22px 0; }

.tsf-consent{
  display:flex; gap:10px; align-items:flex-start; font-size:12px; color:var(--muted);
  line-height:1.55; background:var(--panel-2); border:1px solid var(--border); border-radius:10px;
  padding:13px 14px; margin-top:22px;
}
.tsf-consent input{ margin-top:2px; width:16px; height:16px; accent-color:var(--blue); flex-shrink:0; }

.tsf-error{
  background:#fdecec; border:1px solid #f2b8b8; color:#a12626;
  font-size:12.5px; border-radius:9px; padding:10px 13px; margin-top:16px; line-height:1.45;
}
.tsf-error[hidden]{ display:none; }

.tsf-nav{ margin-top:22px; }
.tsf-btn{
  font-family:inherit; font-size:14.5px; font-weight:700; border-radius:10px; padding:13px 26px;
  cursor:pointer; border:none; transition:filter .15s, opacity .15s, transform .1s, background .15s;
}
.tsf-btn:active{ transform:scale(.985); }
.tsf-btn-primary{ background:var(--blue); color:#fff; width:100%; box-shadow:0 6px 16px -6px rgba(30,157,217,.55); }
.tsf-btn-primary:hover{ background:var(--blue-dark); }
.tsf-btn-primary:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.tsf-btn-ghost{ background:var(--panel-2); color:var(--muted); border:1.5px solid var(--border-strong); }
.tsf-btn-ghost:hover{ color:var(--text); }

/* ---------- ekran potwierdzenia ---------- */
.tsf-done{ text-align:center; padding:14px 6px 6px; }
.tsf-done .ring{
  width:60px; height:60px; border-radius:50%; background:var(--blue-tint); border:1.5px solid var(--blue);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:26px; color:var(--blue-dark);
}
.tsf-done h2{ font-size:19px; margin:0 0 8px; color:var(--text); }
.tsf-done p{ font-size:13.5px; color:var(--muted); line-height:1.65; max-width:420px; margin:0 auto; }
.tsf-done b{ color:var(--text); }
.tsf-done .leadid{ margin-top:16px; font-size:11.5px; color:var(--muted-2); letter-spacing:.04em; }
.tsf-done .steps4{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:24px; text-align:left; }
@media (max-width:520px){ .tsf-done .steps4{ grid-template-columns:1fr 1fr; } }
.tsf-done .step4{ background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:12px; }
.tsf-done .step4 .n{ font-size:11px; font-weight:800; color:var(--blue-dark); }
.tsf-done .step4 .t{ font-size:12px; font-weight:700; color:var(--text); margin-top:3px; }
.tsf-done .step4.active{ border-color:var(--blue); background:var(--blue-tint); }

@media (prefers-reduced-motion: reduce){
  .tsf-overlay, .tsf-dialog{ transition:none; }
}