.cem-form{
  width:100%;
  max-width:900px;
  margin:0 auto;
  color:inherit;
  font-family:inherit;
}
.cem-progress{
  margin:0 0 24px;
  font-size:14px;
  line-height:1.4;
  opacity:.75;
  color:inherit;
}
.cem-step{
  width:100%;
}
.cem-step > label:not(.cem-check){
  display:block;
  margin:0 0 12px;
  font-size:20px;
  line-height:1.3;
  color:inherit;
  font-family:inherit;
}
.cem-step input[type=text],
.cem-step input[type=email],
.cem-step input[type=tel]{
  width:100%;
  min-height:54px;
  box-sizing:border-box;
  padding:10px 4px;
  border:0;
  border-bottom:1px solid currentColor;
  border-radius:0;
  outline:none;
  background:transparent;
  color:inherit;
  font:inherit;
  box-shadow:none;
}
.cem-step input:focus{
  border-bottom-width:2px;
}
.cem-actions{
  margin-top:24px;
}
.cem-form button{
  appearance:none;
  border:0;
  padding:14px 26px;
  min-height:48px;
  font:inherit;
  cursor:pointer;
  background:#f7f1cf;
  color:#111;
}
.cem-form button:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.cem-prev{
  background:transparent!important;
  border:1px solid currentColor!important;
  color:inherit!important;
}
.cem-validate{
  margin-top:18px;
}
.cem-check{
  display:block;
  margin:14px 0;
  color:inherit;
  font:inherit;
}
.cem-code-status,
.cem-status{
  margin-top:16px;
  color:inherit;
}
.cem-confirmation{
  width:100%;
  text-align:center;
  color:inherit;
}
.cem-confirmation .cem-qr,
.cem-confirmation img[data-cem=qr]{
  max-width:280px;
  width:100%;
  height:auto;
}
@media (max-width:767px){
  .cem-step > label:not(.cem-check){font-size:18px}
  .cem-form button{width:100%}
  .cem-actions{flex-direction:column}
}

.cem-form{padding-left:15px;padding-right:15px}
.cem-check{display:flex!important;align-items:flex-start;gap:10px}
.cem-check input{flex:0 0 auto;margin-top:3px}
.cem-check span{display:block}
.cem-check a{color:inherit;text-decoration:underline}

/* UX v3.4 */
.cem-progress{margin-bottom:34px}
.cem-progress-dots{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cem-dot{width:10px;height:10px;border-radius:50%;border:1px solid currentColor;opacity:.45;transition:all .2s ease}
.cem-dot.is-active{opacity:1;background:currentColor;transform:scale(1.15)}
.cem-dot.is-complete{opacity:1;background:currentColor}
.cem-progress-text{font-size:13px;opacity:.7}
.cem-question{margin:0 0 26px;font-family:inherit;font-size:28px;line-height:1.18;font-weight:500;color:inherit}
.cem-step > label:not(.cem-check){font-size:14px!important;opacity:.78;margin-bottom:8px!important}
.cem-step input::placeholder{color:currentColor;opacity:.35}
.cem-code-status.is-valid{margin-top:14px;font-weight:600}
.cem-code-status.is-invalid,.cem-status.is-error{margin-top:14px;font-weight:600}
.cem-review{margin:0 0 28px;border-top:1px solid rgba(255,255,255,.25)}
.cem-review-row{display:grid;grid-template-columns:minmax(110px,.7fr) 1.3fr;gap:20px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.cem-review-row span{opacity:.65;font-size:13px}
.cem-review-row strong{font-weight:500;word-break:break-word}
.cem-success-icon{width:58px;height:58px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;border:2px solid currentColor;border-radius:50%;font-size:30px}
.cem-confirmation-number{font-size:20px}
.cem-step{animation:cemFadeIn .22s ease}
@keyframes cemFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:767px){
  .cem-question{font-size:23px}
  .cem-review-row{grid-template-columns:1fr;gap:4px}
}