/* style.css — simple styling for the survey demo (re-used) */
/* style.css — simple styling for the survey demo (re-used) */
:root{
    
    --card:#ffffff;
    --accent:#8CBC4F;
    --muted:#666;
    --danger:#cc3333;
}

*{box-sizing:border-box}
body{
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(180deg, #eef2ff 0%, var(--bg) 100%);
    color:#222;
    margin:0;
    padding:32px;
}

.container{
    max-width:900px;
    width:100%;
    margin:0 auto;
    background:var(--card);
    padding:28px;
    border-radius:10px;
    box-shadow:0 8px 30px rgba(36,47,86,0.08);
}

h1{margin:0 0 12px}
h2{margin-top:0}

.form-row{
    display:flex;
    gap:16px;
    align-items:flex-start;
    padding:12px 0;
    border-bottom:1px solid #f0f2f7;
}

.form-row:last-child{border-bottom:none}

label{
    width:260px;
    font-weight:600;
    color:#123;
    margin-top:6px;
}

.field{flex:1}

input[type="text"], input[type="number"], textarea, select{
    width:100%;
    padding:10px 12px;
    border-radius:6px;
    border:1px solid #dce6ff;
    background:#fbfdff;
    font-size:15px;
    outline: none;
}

textarea{min-height:96px; resize:vertical}

.radio-inline{
    display:inline-flex;
    gap:8px;
    align-items:center;
    margin-right:12px;
    font-weight:500;
    color:var(--muted);
}

.req{color:var(--danger); margin-left:6px; font-weight:700}

.form-actions{padding-top:18px; text-align:right}
button{
    background:var(--accent);
    color:white;
    border:none;
    padding:10px 18px;
    border-radius:8px;
    font-weight:700;
    cursor:pointer;
}
button:hover{filter:brightness(.95)}

/* Button-like link styles for .btn anchors */
.btn{
    display:inline-block;
    background:var(--accent);
    color:#fff;
    padding:10px 18px;
    border-radius:8px;
    font-weight:700;
    text-decoration:none;
}
.btn:hover{filter:brightness(.95)}

/* Center the rendered thank-you content without affecting the whole summary block */
.rendered-content { text-align: center; }
.rendered-content img { display: block; margin: 0 auto 0.5rem; max-width: 100%; height: auto; }
.rendered-content .recommendations { text-align: center; }
.rendered-content .recommendations ol { display: inline-block; text-align: left; margin: 0; padding-left: 1.2em; }

/* Responsive adjustments */
@media (max-width: 800px) {
    body { padding: 16px; }
    .container { padding: 18px; }
    .form-row { flex-direction: column; gap:8px; }
    label { width: auto; margin-top: 0; }
    .field { width:100%; }
    .radio-inline { display:flex; margin-bottom:6px; }
    /* Mobile order: Next (Successivo) above Prev (Precedente) using order */
    .form-actions { text-align: center; display:flex; flex-direction:column; gap:8px; align-items:center; }
    .form-actions .btn-next { order:0; }
    .form-actions .btn-prev { order:1; }
    .form-actions button { width: 100%; max-width: 320px; display:block; }
}

@media (max-width: 420px) {
    .container { padding: 12px; }
    input[type="text"], input[type="number"], textarea, select { font-size: 14px; padding:8px; }
    textarea { min-height: 80px; }
}

.errors{
    background:#fff0f0;
    border:1px solid #ffd6d6;
    padding:12px 16px;
    border-radius:8px;
    margin-bottom:16px;
    color:var(--danger);
}

.summary{
    background:#f5fff4;
    border:1px solid #e6ffe6;
    padding:12px 16px;
    border-radius:8px;
    margin-bottom:16px;
    color:#0b6b2f;
}

.small{font-size:13px;color:#666}
.page-meta{margin-bottom:12px}