[x-cloak] { display: none !important; }

.formflow-demo {
    --ff-primary: #f00037;
    --ff-accent: #00a99d;
    --ff-text: #4a4a4a;
    --ff-muted: #767676;
    --ff-border: #dddddd;
    --ff-bg: #ffffff;
    --ff-bg-soft: #f7f7f8;

    max-width: 720px;
    margin: 0 auto;
    color: var(--ff-text);
}

.formflow-demo__form {
    background: var(--ff-bg);
    border: 1px solid var(--ff-border);
    padding: 2em 2em 1.75em;
}
@media (max-width: 540px) {
    .formflow-demo__form { padding: 1.25em; }
}

/* Step indicator */
.formflow-demo__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em 1.25em;
    list-style: none;
    padding: 0 0 1.25em;
    margin: 0 0 1.5em;
    border-bottom: 1px solid var(--ff-border);
    font-size: 0.8125em;
    color: var(--ff-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.formflow-demo__steps li { padding: 0; }
.formflow-demo__steps li.is-done { color: var(--ff-text); }
.formflow-demo__steps li.is-active {
    color: var(--ff-primary);
    font-weight: 700;
}

/* Typography */
.formflow-demo__step h2 {
    margin: 0 0 0.25em;
    font-weight: 700;
    color: #111;
}
.formflow-demo__step h3 {
    margin: 1.5em 0 0.5em;
    font-weight: 700;
}
.formflow-demo__lede {
    margin: 0 0 1.5em;
    color: var(--ff-muted);
}
.formflow-demo__info {
    padding: 0.75em 1em;
    background: var(--ff-bg-soft);
    border-left: 3px solid var(--ff-accent);
    margin: 0.5em 0 1.25em;
    font-size: 0.9375em;
}
.formflow-demo__hint {
    font-weight: normal;
    color: var(--ff-muted);
    font-size: 0.875em;
}

/* Inputs */
.formflow-demo label {
    display: block;
    margin: 0.75em 0;
    font-size: 0.9375em;
}
.formflow-demo input[type="text"],
.formflow-demo input[type="email"],
.formflow-demo input[type="tel"],
.formflow-demo input[type="number"] {
    display: block;
    width: 100%;
    margin-top: 0.35em;
    padding: 0.55em 0.7em;
    background: var(--ff-bg);
    border: 1px solid var(--ff-border);
    color: var(--ff-text);
    font: inherit;
    box-sizing: border-box;
}
.formflow-demo input:focus {
    outline: none;
    border-color: var(--ff-primary);
    box-shadow: 0 0 0 2px rgba(240, 0, 55, 0.15);
}
.formflow-demo fieldset {
    margin: 0.75em 0;
    padding: 0.75em 1em;
    border: 1px solid var(--ff-border);
}
.formflow-demo legend {
    padding: 0 0.4em;
    font-weight: 600;
    font-size: 0.9375em;
}
.formflow-demo fieldset label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin: 0.25em 1.5em 0.25em 0;
}

/* Two-column rows */
.formflow-demo__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1em;
}
.formflow-demo__row--postnr {
    grid-template-columns: minmax(0, 160px) 1fr;
}
@media (max-width: 480px) {
    .formflow-demo__row,
    .formflow-demo__row--postnr {
        grid-template-columns: 1fr;
    }
}

/* Kundtyp choice cards */
.formflow-demo__choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75em;
    margin: 0.5em 0 1em;
}
@media (max-width: 480px) {
    .formflow-demo__choices { grid-template-columns: 1fr; }
}
.formflow-demo__choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35em;
    padding: 1.25em 1em;
    text-align: left;
    background: var(--ff-bg);
    border: 1px solid var(--ff-border);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 120ms ease, background-color 120ms ease;
}
.formflow-demo__choice:hover,
.formflow-demo__choice:focus-visible {
    border-color: var(--ff-primary);
    outline: none;
}
.formflow-demo__choice.is-selected {
    border-color: var(--ff-primary);
    background: rgba(240, 0, 55, 0.04);
}
.formflow-demo__choice-title {
    font-size: 1.0625em;
    font-weight: 700;
    color: #111;
}
.formflow-demo__choice-sub {
    font-size: 0.875em;
    color: var(--ff-muted);
}

/* Repeater rows */
.formflow-demo__repeater-row {
    margin: 0.75em 0;
    background: var(--ff-bg-soft);
}

/* Action row */
.formflow-demo__actions {
    margin-top: 1.75em;
    padding-top: 1.25em;
    border-top: 1px solid var(--ff-border);
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
    justify-content: space-between;
}
.formflow-demo__actions button {
    padding: 0.65em 1.4em;
    font: inherit;
    font-weight: 600;
    background: var(--ff-primary);
    color: #fff;
    border: 1px solid var(--ff-primary);
    cursor: pointer;
    transition: opacity 120ms ease;
}
.formflow-demo__actions button:hover,
.formflow-demo__actions button:focus-visible {
    opacity: 0.9;
    outline: none;
}
.formflow-demo__actions button[type="button"]:first-child {
    background: transparent;
    color: var(--ff-text);
    border-color: var(--ff-border);
}
.formflow-demo__actions button[type="button"]:first-child:hover {
    border-color: var(--ff-text);
    opacity: 1;
}

/* Summary list */
.formflow-demo__summary {
    margin: 1em 0 1.5em;
}
.formflow-demo__summary > div {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 2fr;
    gap: 0.25em 1em;
    padding: 0.6em 0;
    border-bottom: 1px solid var(--ff-border);
}
.formflow-demo__summary > div:last-child { border-bottom: 0; }
.formflow-demo__summary dt {
    font-weight: 600;
    margin: 0;
    color: var(--ff-muted);
}
.formflow-demo__summary dd {
    margin: 0;
    color: var(--ff-text);
}

.formflow-demo__terms {
    display: block;
    margin: 1.25em 0;
}

.formflow-demo__visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}