/* forms.fon-fierun.fun — stile condiviso da tutti i moduli */
:root {
    --accent: #ff6600;
    --accent-pale: #fff5eb;
    --accent-soft: #ffe0cc;
    --accent-light: #ffb27f;
    --ink: #262626;
    --muted: #5f5f5f;
    --line: #dcdcdc;
    --error: #c62828;
    --radius: 14px;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; line-height: 1.5; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); }

/* ---------- Pagine "card" (benvenuto, chiuso, successo, errore) ---------- */
.page-hero {
    display: flex; align-items: center; justify-content: center;
    padding: 20px 16px;
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
}
.page-success { background: linear-gradient(135deg, #d4edda, #9fd8ad); }
.page-error { background: linear-gradient(135deg, #ff9a9e, var(--accent)); }

.card {
    width: 100%; max-width: 700px;
    background: #fff; border-radius: 25px;
    padding: 32px 22px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .2);
    text-align: center;
}
.card h1 { color: var(--accent); font-size: clamp(24px, 6vw, 30px); margin: 0 0 14px; line-height: 1.2; }
.card .text-error { color: #d93025; }
.emoji { display: block; font-size: 60px; line-height: 1; margin-bottom: 12px; }
.rich { font-size: 17px; color: #444; margin-bottom: 26px; overflow-wrap: anywhere; }
.rich ul, .rich ol { text-align: left; padding-left: 1.3em; }
.rich li { margin: 6px 0; }
.rich hr { border: 0; border-top: 1px solid #eee; margin: 18px 0; }
.rich p { margin: 0 0 12px; }
.deadline {
    font-size: 15px; background: var(--accent-pale); border-radius: 12px;
    padding: 10px 14px; margin: -8px 0 24px; color: #444;
}
.muted { color: #888; font-size: 14px; }

.btn {
    display: block; width: 100%;
    padding: 19px; border: 0; border-radius: 15px;
    background: var(--accent); color: #fff;
    font: inherit; font-size: 19px; font-weight: 700; text-align: center; text-decoration: none;
    box-shadow: 0 5px 15px color-mix(in srgb, var(--accent) 40%, transparent);
    cursor: pointer; transition: transform .15s, filter .15s;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn-off { background: #888; box-shadow: none; cursor: not-allowed; }
.btn-off:active { transform: none; }
.back-link { display: inline-block; margin-top: 18px; color: #888; font-size: 14px; text-decoration: none; }

/* ---------- Pagina del modulo ---------- */
.page-form { background: var(--accent-pale); padding: 16px; }
.sheet {
    max-width: 640px; margin: 0 auto;
    background: #fff; border-top: 8px solid var(--accent); border-radius: 20px;
    padding: clamp(20px, 5vw, 32px);
    box-shadow: 0 8px 28px rgba(123, 60, 21, .07);
}
.sheet h1 { margin: 0 0 6px; text-align: center; color: var(--accent); font-size: clamp(23px, 5.5vw, 30px); line-height: 1.25; }
.intro { text-align: center; color: var(--muted); font-size: 16px; margin: 6px 0 18px; }

.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.field { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-width: 0; }
.field.w-half { grid-column: span 1; }
.field[data-show-if]:not(.is-visible) { display: none; }

.field-label { display: block; font-weight: 700; font-size: 16px; margin: 18px 0 7px; padding: 0; color: #333; }
.req { color: var(--accent); }
.help { font-size: 13.5px; color: var(--muted); margin: -2px 0 8px; }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], input[type=time], select, textarea {
    width: 100%; padding: 14px; border: 2px solid var(--line); border-radius: 12px;
    font: inherit; font-size: 16px; /* 16px evita lo zoom automatico su iPhone */
    background: #fff; color: var(--ink); transition: border-color .15s;
}
input[type=date], input[type=time] { min-height: 52px; }
textarea { resize: vertical; min-height: 110px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #777 50%), linear-gradient(135deg, #777 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }

.with-suffix { position: relative; }
.with-suffix input { padding-right: 46px; }
.suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #888; font-size: 14px; pointer-events: none; }

.choices { display: flex; flex-direction: column; gap: 10px; }
.choices-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice {
    display: flex; align-items: center; gap: 12px;
    border: 2px solid #eee; border-radius: 12px; padding: 14px 15px;
    cursor: pointer; transition: border-color .15s, background-color .15s; font-weight: 600;
}
.choice input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-pale); }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent-soft); }
.choice.consent { font-weight: 400; align-items: flex-start; margin-top: 18px; }
.choice.consent input { margin-top: 2px; }

.section-title { font-size: 19px; margin: 28px 0 0; padding-bottom: 8px; border-bottom: 2px solid var(--accent-soft); color: #333; }
.section-title + .help { margin-top: 8px; }
.info-box { margin-top: 16px; padding: 13px 15px; background: var(--accent-pale); border-left: 4px solid var(--accent); border-radius: 10px; font-size: 15px; color: #444; }
.info-box p:last-child { margin-bottom: 0; }

figure.field { margin: 18px 0 0; text-align: center; background: #fafafa; border: 1px solid #eee; border-radius: 14px; padding: 14px; }
figure.field figcaption { font-weight: 700; margin-bottom: 8px; }
figure.field img { max-height: 520px; width: auto; }

.has-error input, .has-error select, .has-error textarea { border-color: var(--error); }
.has-error .choice { border-color: #f3c0c0; }
.error-msg { color: var(--error); font-size: 14px; font-weight: 600; margin: 6px 0 0; }
.alert { background: #fdecea; color: #8a1c1c; border-radius: 12px; padding: 12px 15px; margin: 14px 0 4px; font-weight: 600; }

.btn-submit { grid-column: 1 / -1; margin-top: 30px; }
.btn-submit[disabled] { opacity: .7; cursor: progress; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.preview-bar {
    position: sticky; top: 0; z-index: 10; margin: -16px -16px 16px;
    background: #222; color: #fff; text-align: center; font-size: 14px; padding: 8px 12px;
}
.page-hero .preview-bar { position: fixed; left: 0; right: 0; margin: 0; }
.preview-bar a { color: #ffcc80; }

@media (max-width: 380px) {
    .fields { grid-template-columns: 1fr; }
    .field.w-half { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}
fieldset.field > legend.field-label { float: left; width: 100%; padding-top: 18px; margin: 0 0 7px; }
fieldset.field > legend + * { clear: both; }