/*!
 * Silentsystem Forms — front end.
 * Everything is scoped under .fss (no global resets: the theme stays untouched).
 * Brand: black, white, Silentsystem orange. Font inherited from the theme.
 */
.fss {
    --fss-accent: #ff7200;
    --fss-accent-ink: #b84f00;     /* orange that passes contrast on white, for text/links */
    --fss-ink: #000000;
    --fss-text: #1f1f1f;
    --fss-muted: #6b6b6b;
    --fss-line: #cfcfcf;
    --fss-line-strong: #8f8f8f;
    --fss-field: #ffffff;
    --fss-soft: #f4f4f4;
    --fss-error: #c4281c;
    --fss-error-soft: #fdecea;
    --fss-ok: #1f7a3d;
    --fss-radius: 6px;
    --fss-gap: 16px;
    --fss-h: 56px;

    color: var(--fss-text);
    font: inherit;
    line-height: 1.5;
    max-width: 780px;
    margin: 0 auto;
    text-align: left;
    box-sizing: border-box;
}
.fss *, .fss *::before, .fss *::after { box-sizing: border-box; }
.fss [hidden] { display: none !important; }

.fss--dark {
    --fss-accent-ink: #ff9a4d;
    --fss-ink: #ffffff;
    --fss-text: #f2f2f2;
    --fss-muted: #a8a8a8;
    --fss-line: #4a4a4a;
    --fss-line-strong: #8a8a8a;
    --fss-field: #161616;
    --fss-soft: #222222;
    --fss-error: #ff7a6e;
    --fss-error-soft: rgba(255, 122, 110, .12);
    --fss-ok: #5fd08a;
}

/* ── Heading ─────────────────────────────── */
.fss-head { margin: 0 0 24px; }
.fss .fss-title {
    margin: 0;
    font-family: inherit;
    text-transform: none;
    color: var(--fss-ink);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    line-height: 1.15;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -.01em;
}
.fss .fss-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 12px;
    background: var(--fss-accent);
    transform: skewX(-24deg);
    transform-origin: left;
}
.fss-intro, .fss-step__intro { margin-top: 12px; color: var(--fss-muted); font-size: .975rem; }
.fss-intro p, .fss-step__intro p { margin: 0 0 .5em; }

/* ── Steps / progress ───────────────────── */
.fss-progress { margin: 0 0 28px; }
.fss-steps {
    display: grid;
    grid-template-columns: repeat(var(--fss-steps), minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}
.fss-steps__item { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--fss-muted); font-size: .8125rem; }
.fss-steps__num {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--fss-line-strong);
    border-radius: 50%;
    font-weight: 700;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    transition: background-color .2s, border-color .2s, color .2s;
}
.fss-steps__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fss-steps__item.is-active { color: var(--fss-ink); font-weight: 700; }
.fss-steps__item.is-active .fss-steps__num { background: var(--fss-ink); border-color: var(--fss-ink); color: var(--fss-field); }
.fss-steps__item.is-done .fss-steps__num { background: var(--fss-accent); border-color: var(--fss-accent); color: #000; }
.fss-meter { position: relative; height: 4px; background: var(--fss-soft); border-radius: 2px; overflow: hidden; }
.fss-meter__bar { position: absolute; inset: 0 auto 0 0; background: var(--fss-accent); transition: width .35s ease; }
@media (min-width: 641px) {
    .fss-steps:has(> :nth-child(6)) .fss-steps__item:not(.is-active) .fss-steps__label { display: none; }
}
@media (max-width: 640px) {
    .fss-steps__label { display: none; }
    .fss-steps__item.is-active .fss-steps__label { display: block; }
    .fss-steps { grid-template-columns: repeat(var(--fss-steps), auto); justify-content: space-between; }
}

.fss .fss-step__title { font-family: inherit; letter-spacing: normal; text-transform: none;
    margin: 0 0 18px; color: var(--fss-ink); font-size: 1.15rem; font-weight: 700; line-height: 1.3; }

/* ── Grid ───────────────────────────────── */
.fss-grid { display: flex; flex-wrap: wrap; gap: 18px var(--fss-gap); }
/* Fields grow to fill their row: hide one of three 1/3 fields (e.g. PEC or SDI)
   and the other two become halves automatically. */
.fss-field { flex: 1 0 100%; min-width: 0; margin: 0; }
.fss-w-3-4 { flex-basis: calc(75% - var(--fss-gap) * .25); }
.fss-w-2-3 { flex-basis: calc(66.666% - var(--fss-gap) / 3); }
.fss-w-1-2 { flex-basis: calc(50% - var(--fss-gap) / 2); }
.fss-w-1-3 { flex-basis: calc(33.333% - var(--fss-gap) * 2 / 3); }
.fss-w-1-4 { flex-basis: calc(25% - var(--fss-gap) * .75); }
@media (max-width: 900px) {
    .fss-w-1-3, .fss-w-1-4 { flex-basis: calc(50% - var(--fss-gap) / 2); }
    .fss-w-3-4, .fss-w-2-3 { flex-basis: 100%; }
    .fss-wt-1 { flex-basis: 100%; }
    .fss-wt-1-2 { flex-basis: calc(50% - var(--fss-gap) / 2); }
    .fss-wt-1-3 { flex-basis: calc(33.333% - var(--fss-gap) * 2 / 3); }
}
@media (max-width: 640px) {
    .fss .fss-field { flex-basis: 100%; }
}

/* ── Controls (floating label) ─────────── */
.fss-control { position: relative; }
.fss .fss-control input,
.fss .fss-control select,
.fss .fss-control textarea {
    display: block;
    width: 100%;
    min-height: var(--fss-h);
    margin: 0;
    padding: 24px 14px 8px;
    background: var(--fss-field);
    color: var(--fss-text);
    border: 1.5px solid var(--fss-line);
    border-radius: var(--fss-radius);
    box-shadow: none;
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
.fss .fss-control textarea { min-height: 128px; padding-top: 28px; resize: vertical; }
.fss .fss-control select { padding-right: 40px; cursor: pointer; }
.fss .fss-control.has-icon input, .fss .has-icon .fss-control input,
.fss .has-icon .fss-control select { padding-left: 44px; }
.fss .fss-control input:hover, .fss .fss-control select:hover, .fss .fss-control textarea:hover { border-color: var(--fss-line-strong); }
.fss .fss-control input:focus, .fss .fss-control select:focus, .fss .fss-control textarea:focus {
    outline: none;
    border-color: var(--fss-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fss-accent) 22%, transparent);
}
.fss .fss-control input[readonly] { background: var(--fss-soft); color: var(--fss-muted); }

.fss-label {
    position: absolute;
    top: 17px;
    left: 15px;
    right: 14px;
    margin: 0;
    color: var(--fss-muted);
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 400;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left top;
    transition: transform .15s ease, color .15s ease, top .15s ease;
}
.fss .has-icon .fss-label { left: 45px; }
.fss-control--textarea .fss-label { top: 16px; }
.fss-optional { color: var(--fss-muted); font-weight: 400; }

/* floated: focused, filled, date inputs, or explicit placeholder */
.fss-control:focus-within .fss-label,
.fss-control.is-filled .fss-label,
.fss-control.is-floated .fss-label,
.fss-control input:not(:placeholder-shown) ~ .fss-label,
.fss-control textarea:not(:placeholder-shown) ~ .fss-label {
    top: 8px;
    transform: scale(.78);
    font-weight: 600;
    color: var(--fss-text);
}
.fss-control:focus-within .fss-label { color: var(--fss-accent-ink); }
.fss .fss-control input::placeholder, .fss .fss-control textarea::placeholder { color: transparent; }
.fss .fss-control.is-floated input::placeholder,
.fss .fss-control:focus-within textarea::placeholder { color: color-mix(in srgb, var(--fss-muted) 70%, transparent); }

.fss .fss-icon { flex: 0 0 auto; }
.fss-control > .fss-icon:first-child {
    position: absolute;
    left: 14px;
    top: 18px;
    color: var(--fss-muted);
    pointer-events: none;
    transition: color .15s;
}
.fss-control:focus-within > .fss-icon:first-child { color: var(--fss-accent-ink); }
.fss .fss-caret { position: absolute; right: 14px; top: 18px; color: var(--fss-muted); pointer-events: none; }

/* date picker icon on WebKit */
.fss .fss-control input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
.fss--dark .fss-control input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* ── Checkbox ───────────────────────────── */
.fss .fss-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 2px 0;
    cursor: pointer;
    color: var(--fss-text);
    font-size: .95rem;
    line-height: 1.45;
}
.fss .fss-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.fss-check__box {
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 1.5px solid var(--fss-line-strong);
    border-radius: 4px;
    background: var(--fss-field);
    color: transparent;
    transition: background-color .15s, border-color .15s;
}
.fss-check__box .fss-icon { width: 16px; height: 16px; stroke-width: 3; }
.fss .fss-check input:checked + .fss-check__box { background: var(--fss-accent); border-color: var(--fss-accent); color: #000; }
.fss .fss-check input:focus-visible + .fss-check__box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fss-accent) 35%, transparent); }
.fss .fss-check a { color: var(--fss-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.fss-field--consent { padding: 14px 16px; background: var(--fss-soft); border-radius: var(--fss-radius); margin-top: 6px; }
.fss-field--consent .fss-check { font-size: .875rem; }

/* ── File upload ────────────────────────── */
.fss-file { position: relative; }
.fss-file__label { display: block; margin: 0 0 6px; font-weight: 600; font-size: .9rem; color: var(--fss-text); }
.fss .fss-file__drop {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon cta" "icon name";
    align-items: center;
    column-gap: 14px;
    margin: 0;
    padding: 14px 16px;
    border: 1.5px dashed var(--fss-line-strong);
    border-radius: var(--fss-radius);
    background: var(--fss-field);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.fss-file__drop > .fss-icon { grid-area: icon; width: 26px; height: 26px; color: var(--fss-accent-ink); }
.fss-file__cta { grid-area: cta; font-weight: 700; color: var(--fss-ink); }
.fss-file__name { grid-area: name; color: var(--fss-muted); font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fss-file__hint { display: none; }
.fss-file:hover .fss-file__drop { border-color: var(--fss-accent); }
.fss .fss-file__input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.fss .fss-file__input:focus-visible + .fss-file__drop,
.fss .fss-file:focus-within .fss-file__drop { border-color: var(--fss-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fss-accent) 22%, transparent); }
.has-file .fss-file__drop { border-style: solid; border-color: var(--fss-accent); }
.has-file .fss-file__name { color: var(--fss-text); font-weight: 600; }
.fss .fss-file__remove {
    position: relative;
    z-index: 2;
    margin: 6px 0 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--fss-muted);
    font: inherit;
    font-size: .8125rem;
    text-decoration: underline;
    cursor: pointer;
}

/* ── Help / errors ──────────────────────── */
.fss-help { margin: 6px 2px 0; color: var(--fss-muted); font-size: .8125rem; }
.fss-error { display: flex; gap: 6px; margin: 6px 2px 0; color: var(--fss-error); font-size: .8125rem; font-weight: 600; }
.fss-field.is-invalid .fss-control input,
.fss-field.is-invalid .fss-control select,
.fss-field.is-invalid .fss-control textarea,
.fss-field.is-invalid .fss-file__drop,
.fss-field.is-invalid .fss-check__box { border-color: var(--fss-error); }
.fss-field.is-invalid .fss-label { color: var(--fss-error); }
.fss-step__error { margin: 16px 0 0; color: var(--fss-error); font-weight: 600; font-size: .9rem; }
.fss-note { color: var(--fss-muted); font-size: .95rem; }
.fss-note p { margin: 0 0 .5em; }

/* ── Buttons ────────────────────────────── */
.fss-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 28px; }
.fss .fss-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    margin: 0;
    padding: 0 28px;
    border: 2px solid transparent;
    border-radius: var(--fss-radius);
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: .01em;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.fss .fss-btn--primary { background: var(--fss-accent); color: #000; min-width: 200px; }
.fss .fss-btn--primary:hover { background: #000; color: var(--fss-accent); }
.fss--dark .fss-btn--primary:hover { background: #fff; color: #000; }
.fss .fss-btn--ghost { margin-right: auto; padding: 0 16px 0 8px; background: transparent; color: var(--fss-text); font-style: normal; font-weight: 600; }
.fss .fss-btn--ghost:hover { color: var(--fss-accent-ink); }
.fss .fss-btn:focus-visible { outline: 3px solid var(--fss-ink); outline-offset: 2px; }
.fss .fss-btn:active { transform: translateY(1px); }
.fss .fss-btn[disabled] { cursor: progress; }
.fss-btn__busy { display: none; align-items: center; gap: 10px; }
.fss-btn.is-busy .fss-btn__label { display: none; }
.fss-btn.is-busy .fss-btn__busy { display: inline-flex; }
.fss-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: fss-spin .7s linear infinite;
}
@keyframes fss-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
    .fss .fss-btn--primary { flex: 1 1 100%; order: -1; }
    .fss .fss-btn--ghost { margin: 0 auto; }
}

/* ── Alert ──────────────────────────────── */
.fss-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 16px;
    border-left: 4px solid var(--fss-error);
    background: var(--fss-error-soft);
    color: var(--fss-text);
    font-size: .95rem;
}
.fss-alert .fss-icon { color: var(--fss-error); margin-top: 1px; }

/* ── Review ─────────────────────────────── */
.fss-review:focus { outline: none; }
.fss .fss-review__list {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr;
    margin: 0;
    border-top: 1px solid var(--fss-line);
}
.fss .fss-review__list dt, .fss .fss-review__list dd { margin: 0; padding: 12px 4px; border-bottom: 1px solid var(--fss-line); }
.fss .fss-review__list dt { color: var(--fss-muted); font-size: .9rem; }
.fss .fss-review__list dd { color: var(--fss-ink); font-weight: 600; word-break: break-word; }

/* ── Success ────────────────────────────── */
.fss-success { padding: 8px 0; animation: fss-in .45s ease both; }
.fss-success:focus { outline: none; }
.fss-success__mark {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: #000;
    color: var(--fss-accent);
}
.fss--dark .fss-success__mark { background: var(--fss-accent); color: #000; }
.fss-success__mark .fss-icon { width: 34px; height: 34px; stroke-width: 2.6; stroke-dasharray: 30; stroke-dashoffset: 30; animation: fss-draw .5s .15s ease forwards; }
.fss .fss-success__title { margin: 0 0 10px; color: var(--fss-ink); font-family: inherit; font-size: 1.4rem; font-weight: 800; font-style: italic; }
.fss-success__text, .fss-success__body { margin: 0 0 20px; color: var(--fss-ink); font-size: 1.2rem; font-weight: 600; line-height: 1.45; }
.fss-success__body { font-weight: 400; font-size: 1.05rem; }
@keyframes fss-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fss-draw { to { stroke-dashoffset: 0; } }

/* ── Misc ───────────────────────────────── */
.fss-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.fss-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fss-admin-hint { padding: 10px 14px; border-left: 4px solid #ff7200; background: #fff5ec; color: #111; font-size: 14px; }
.fss-field.is-prefilled .fss-control::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 22px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fss-accent);
}

@media (prefers-reduced-motion: reduce) {
    .fss *, .fss *::before, .fss *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .fss-success__mark .fss-icon { stroke-dashoffset: 0; }
}