/*
 * Leadmotorn: wizarden pa publika sidor. Mobil forst, falt med etiketter,
 * radioknappar aven som klickbara kort.
 */

.lg-wizard {
  max-width: 34rem;
  margin: 0 auto;
}
.lg-wizard__progress {
  display: flex;
  align-items: center;
  gap: var(--lg-space-3);
  margin-bottom: var(--lg-space-4);
}
.lg-wizard__progress > div:first-child {
  flex: 1;
  height: 6px;
  background-color: var(--lg-color-surface-gray);
  border-radius: var(--lg-radius-pill);
  overflow: hidden;
}
.lg-wizard__bar {
  height: 100%;
  background-color: var(--lg-color-secondary);
  transition: width 0.2s ease;
}
.lg-wizard__count {
  font-size: var(--lg-fs-xs);
  color: var(--lg-color-text-muted);
  white-space: nowrap;
}
.lg-wizard__step {
  border: none;
  margin: 0 0 var(--lg-space-4);
  padding: 0;
}
.lg-wizard__step legend {
  font-family: var(--lg-font-heading);
  font-weight: 700;
  font-size: var(--lg-fs-xl);
  padding: 0;
  margin-bottom: var(--lg-space-2);
}
.lg-wizard__text { color: var(--lg-color-text-muted); }
.lg-wizard__nav {
  display: flex;
  gap: var(--lg-space-3);
  justify-content: flex-end;
}
.lg-wizard__error {
  margin-top: var(--lg-space-3);
  padding: var(--lg-space-3);
  background-color: var(--lg-color-error-bg);
  color: var(--lg-color-error);
  border-radius: var(--lg-radius-sm);
  font-size: var(--lg-fs-s);
}
.lg-wizard__thanks {
  margin-top: var(--lg-space-4);
  padding: var(--lg-space-5);
  background-color: var(--lg-color-success-bg);
  border-radius: var(--lg-radius-md);
}
.lg-wizard__thanks:focus { outline: none; }

/* Honeypot: doljs for manniskor, syns for bottar som lasar css-los html */
.lg-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 1px;
  overflow: hidden;
}

/* Radioknappar och kryssrutor aven som klickbara kort */
.lg-options {
  display: grid;
  gap: var(--lg-space-2);
}
.lg-option {
  display: flex;
  align-items: center;
  gap: var(--lg-space-2);
  border: 1px solid var(--lg-color-border);
  border-radius: var(--lg-radius-sm);
  padding: var(--lg-space-2) var(--lg-space-3);
  cursor: pointer;
  font-weight: 400;
}
.lg-option:hover, .lg-option:focus-within {
  border-color: var(--lg-color-primary);
  background-color: var(--lg-color-surface);
}
.lg-option input { width: auto; margin: 0; }