/* ============================================================
   Több lépcsős lead-űrlap (Training Hungary CRM) — KÖZÖS stylesheet
   ------------------------------------------------------------
   Mindkét landing (index.html, gyartas.html) ezt tölti be; a színeket
   és betűket a beágyazó oldal :root design-tokenjeiből veszi
   (--cyan, --gold, --ink, --line-cyan, --font-body, --font-disp, --r-sm …),
   így az űrlap automatikusan az adott oldal arculatát követi.
   Viselkedés: assets/js/lead-form.js
   ============================================================ */
.thcrm-form{ position:relative; }

/* Honeypot — botcsapda, ember számára láthatatlan */
.thcrm-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* --- Lépcső-fejléc + folyamatjelző --- */
.thcrm-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-bottom:9px; min-height:20px;
}
.thcrm-steptitle{
  font-family:var(--font-disp); font-size:14.5px; font-weight:700;
  color:var(--white); letter-spacing:-.01em;
}
.thcrm-stepno{
  font-size:11.5px; font-weight:800; letter-spacing:.16em;
  color:var(--muted); white-space:nowrap;
}
.thcrm-bar{
  height:4px; width:100%; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.10); margin-bottom:18px;
}
.thcrm-bar > span{
  display:block; height:100%; width:33%; border-radius:99px;
  background:linear-gradient(90deg, var(--cyan-soft), var(--cyan));
  box-shadow:0 0 14px rgba(144,251,254,.55);
  transition:width .55s cubic-bezier(.2,.8,.2,1);
}
/* opcionális szegmenses jelző (ha a CRM markup tartalmazza) */
.thcrm-steps{ display:flex; gap:5px; margin:0 0 16px; }
.thcrm-steps span{ height:3px; flex:1; border-radius:99px; background:rgba(255,255,255,.10); transition:background .3s ease; }
.thcrm-steps span.on{ background:var(--cyan); }

/* --- Lépcsők (a magasságot a JS animálja) --- */
.thcrm-body{
  position:relative; overflow:hidden;
  min-height:120px;
  margin:0 -8px; padding:8px;          /* hely a fókuszgyűrűnek a levágás ellen */
  transition:height .4s cubic-bezier(.2,.8,.2,1);
}
.thcrm-step{ animation:thcrmStepIn .38s ease both; }
.thcrm-step[hidden]{ display:none; }
@keyframes thcrmStepIn{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
.thcrm-stepdesc{ font-size:13px; color:var(--muted); margin:-2px 0 14px; }

/* --- Mezők --- */
.thcrm-row{ margin-bottom:13px; }
.thcrm-row:last-child{ margin-bottom:0; }
.thcrm-label{
  display:block; font-size:13px; font-weight:700; color:var(--text);
  margin-bottom:6px; letter-spacing:.005em;
}
.thcrm-req{ color:var(--gold); }
.thcrm-input{
  width:100%; font-family:var(--font-body); font-size:15px; line-height:1.4;
  color:var(--white); background:rgba(16,24,28,.45);
  border:1px solid rgba(255,255,255,.10); border-radius:9px;
  padding:12.5px 14px; -webkit-appearance:none; appearance:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.thcrm-input::placeholder{ color:#6E7A80; }
.thcrm-input:hover{ border-color:rgba(255,255,255,.2); }
.thcrm-input:focus{
  outline:none; border-color:var(--cyan); background:rgba(16,24,28,.62);
  box-shadow:0 0 0 3px rgba(144,251,254,.16);
}
.thcrm-input.thcrm-invalid{ border-color:rgba(224,96,92,.7); box-shadow:0 0 0 3px rgba(224,96,92,.14); }
/* böngésző-autofill: ne törje meg a sötét hátteret */
.thcrm-input:-webkit-autofill,
.thcrm-input:-webkit-autofill:hover,
.thcrm-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--white);
  -webkit-box-shadow:0 0 0 40px #1C2A31 inset;
  caret-color:var(--white);
}
.thcrm-help{ font-size:12px; color:var(--muted); margin:5px 2px 0; }

/* --- Hozzájárulás / jelölőnégyzet --- */
.thcrm-check{
  display:flex; gap:10px; align-items:flex-start;
  font-size:12.6px; line-height:1.5; color:var(--muted);
  margin-top:16px; cursor:pointer;
}
.thcrm-check input[type=checkbox]{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; flex:0 0 18px; margin:1px 0 0; cursor:pointer;
  background:rgba(16,24,28,.55); border:1.5px solid rgba(255,255,255,.28); border-radius:5px;
  display:inline-grid; place-content:center;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.thcrm-check input[type=checkbox]::before{
  content:""; width:10px; height:10px; background:var(--ink);
  transform:scale(0); transition:transform .16s cubic-bezier(.2,.8,.2,1);
  clip-path:polygon(14% 44%, 0 60%, 40% 100%, 100% 20%, 84% 6%, 38% 68%);
}
.thcrm-check:hover input[type=checkbox]{ border-color:rgba(144,251,254,.55); }
.thcrm-check input[type=checkbox]:checked{ background:var(--cyan); border-color:var(--cyan); }
.thcrm-check input[type=checkbox]:checked::before{ transform:scale(1); }
.thcrm-check input[type=checkbox]:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.thcrm-check input[type=checkbox].thcrm-invalid{
  border-color:rgba(224,96,92,.85); box-shadow:0 0 0 3px rgba(224,96,92,.16);
}
.thcrm-check a{ text-decoration:underline; text-underline-offset:2px; }
.thcrm-radios{ display:flex; flex-direction:column; gap:8px; }

/* --- Gombrácsos választók (ha a CRM ilyen lépcsőt is küld) --- */
.thcrm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.thcrm-grid-1{ grid-template-columns:1fr; }
.thcrm-opt{
  font:inherit; font-size:14.5px; text-align:left; cursor:pointer;
  color:var(--text); background:rgba(16,24,28,.45);
  border:1px solid rgba(255,255,255,.10); border-radius:10px; padding:13px 15px;
  transition:border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.thcrm-opt:hover{ border-color:var(--line-cyan); color:var(--white); }
.thcrm-opt.sel{
  border-color:var(--cyan); color:var(--cyan-pale);
  background:rgba(144,251,254,.10); box-shadow:0 0 0 3px rgba(144,251,254,.14);
}

/* --- Navigáció --- */
.thcrm-nav{ display:flex; gap:10px; margin-top:20px; }
.thcrm-nav button{
  font-family:var(--font-body); font-weight:800; font-size:15.5px; letter-spacing:.01em;
  border:0; border-radius:var(--r-sm); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.thcrm-nav button[hidden]{ display:none; }
.thcrm-next, .thcrm-btn{
  flex:1; padding:15px 22px;
  background:linear-gradient(180deg, #EBC35B 0%, var(--gold) 60%, var(--gold-deep) 100%);
  color:var(--ink);
  box-shadow:0 10px 26px -10px rgba(224,180,65,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
.thcrm-next:hover, .thcrm-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(224,180,65,.6), inset 0 1px 0 rgba(255,255,255,.35); }
.thcrm-next .arr{ transition:transform .18s ease; }
.thcrm-next:hover .arr{ transform:translateX(4px); }
.thcrm-back{
  flex:0 0 auto; padding:15px 20px;
  background:transparent; color:var(--cyan);
  box-shadow:inset 0 0 0 1.5px var(--line-cyan);
}
.thcrm-back:hover{ color:var(--cyan-pale); box-shadow:inset 0 0 0 1.5px rgba(144,251,254,.55); }
.thcrm-nav button:disabled{ opacity:.6; cursor:default; transform:none; }
.thcrm-nav button:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.thcrm-btn.is-loading{ position:relative; color:transparent; }
.thcrm-btn.is-loading::after{
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(16,24,28,.35); border-top-color:var(--ink);
  animation:thcrmSpin .7s linear infinite;
}
@keyframes thcrmSpin{ to{ transform:rotate(360deg); } }

/* --- Visszajelzés --- */
.thcrm-msg{ margin-top:12px; border-radius:10px; padding:11px 14px; font-size:13.5px; line-height:1.5; }
.thcrm-err{ background:rgba(224,96,92,.12); border:1px solid rgba(224,96,92,.35); color:#F0B5B3; }
.thcrm-ok{ background:rgba(144,251,254,.10); border:1px solid var(--line-cyan); color:var(--cyan-pale); }

@media (prefers-reduced-motion: reduce){
  .thcrm-body{ transition:none; }
  .thcrm-step{ animation:none; }
  .thcrm-bar > span{ transition:none; }
}

@media (max-width:680px){
  .thcrm-grid{ grid-template-columns:1fr; }
  .thcrm-next, .thcrm-btn{ padding:15px 16px; font-size:15px; }
  .thcrm-back{ padding:15px 16px; }
}