/* Bootstrap-alapú wizard skin (az eredeti működés változatlan) */

.card {
  max-width: 920px;
  margin: 0 auto;
}

/* Step-ek */
.step { display: none; }
.step.active { display: block; }

/* Wizard opciók: a rádiót elrejtjük, a label lesz a "kártya" */
.opt input[type="radio"] { display: none; }

.step .opt label{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 14px 12px;
  border: 2px solid #e5e5e5;
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  background: #fff;
  color: #212529;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.step .opt label:hover{
  background-color: #f42349;
  color: #fff;
  border-color: #f42349;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.step .opt input[type="radio"]:checked + label{
  background-color: #f42349;
  color: #fff;
  border-color: #f42349;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* A hibaszöveg alapból rejtve, a JS kapcsolja */
.wizard-err{
  display: none;
  margin-top: 10px;
}

/* Progress bar */
#bar{
  background: linear-gradient(90deg, #f42349, #dcb7a9, #f42349);
  background-size: 200% 100%;
  position: relative;
  transition: width 0.5s cubic-bezier(.22,1,.36,1);
}

#bar::after{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  width:40%;
  height:100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  animation: progressShimmer 1.2s linear infinite;
  pointer-events:none;
}

@keyframes progressShimmer{
  0% { left: -40%; }
  100% { left: 120%; }
}

@media (prefers-reduced-motion: reduce){
  #bar{ transition:none; }
  #bar::after{ animation:none; }
}

/* Loading overlay (küldés közben) */
.wizard-loading{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.wizard-loading.is-active{ display:flex; }
.wizard-loading .box{
  text-align:center;
  padding: 18px 20px;
  border-radius: 14px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  max-width: 340px;
  width: calc(100% - 40px);
}
.wizard-loading .msg{ margin-top: 12px; font-weight: 600; }

/* Hibaszöveg: fix hely, ne ugráljon a layout */
.wizard-err{
  display: block !important;
  min-height: 20px;   /* ennyi helyet mindig foglal */
  margin-top: 0px;
  visibility: hidden; /* alapból rejtve */
}

/* amikor hiba van */
.wizard-err.is-visible{
  visibility: visible;
}

.wisard .form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 26px 15px;
    margin-bottom: 0px;
    border: 1px solid #cbd5e0;
    border-radius: 10px;
    font-size: 16px;
}

.step.thankyou.active ~ .actions {
  display: none !important;
}

.wizard-wrap{
  position: relative;
  min-height: 640px; /* ennyi helyet foglal az oldalon fixen */
}

.wizard-wrap .card{
  position: absolute;
  left: 0;
  right: 0;
}