/* =============================================
   Survey UI — adattato alle variabili del tema
   Importa survey_theme.css prima di questo file
   ============================================= */

/* Sfondo */
body {
    background-color: var(--sjs-general-backcolor-dim);       /* #f0f0f0 → rgba(243,243,243,1) */
    font-family: var(--sjs-font-family), sans-serif;           /* Open Sans */
    font-size: var(--sjs-font-size);                           /* 16px */
    padding: 40px;
}

#surveyContainer {
    max-width: 800px;
    margin: 0 auto;
}

/* ── Titolo pagina ──────────────────────────────────────────── */
.sd-title h3,
.sd-title .sv-string-viewer {
    font-size: 2rem;
    font-weight: 700;
    color: var(--sjs-font-pagetitle-color);                    /* rgba(0,0,0,0.91) */
}

/* ── Descrizione pagina ─────────────────────────────────────── */
.sd-description,
.sd-description .sv-string-viewer {
    font-size: 1rem;
    font-weight: 400;
    color: var(--sjs-font-pagedescription-color);              /* rgba(0,0,0,0.45) */
    margin-top: 4px;
}

/* ── Titolo domanda ─────────────────────────────────────────── */
.sd-question__title,
.sd-question__title .sv-string-viewer {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--sjs-font-questiontitle-color) !important;     /* rgba(0,0,0,0.91) */
}

/* ── Card domanda ───────────────────────────────────────────── */
.sd-question {
    background: var(--sjs-questionpanel-backcolor);            /* #ffffff */
    border-radius: calc(var(--sjs-corner-radius) * 3);         /* 4px × 3 = 12px */
    padding: calc(var(--sjs-base-unit) * 3);                   /* 8px × 3 = 24px */
    box-shadow: var(--sjs-shadow-small);                       /* 0 1px 2px rgba(0,0,0,0.15) */
    margin-bottom: calc(var(--sjs-base-unit) * 2);             /* 8px × 2 = 16px */
    border: none;
}

/* ── Input ──────────────────────────────────────────────────── */
.sd-input {
    border: 1.5px solid var(--sjs-border-default) !important;  /* rgba(0,0,0,0.16) */
    border-radius: calc(var(--sjs-corner-radius) * 2) !important; /* 4px × 2 = 8px */
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    background: var(--sjs-editorpanel-backcolor) !important;   /* rgba(249,249,249,1) */
    color: var(--sjs-font-editorfont-color) !important;
}

.sd-input::placeholder {
    color: var(--sjs-font-editorfont-placeholdercolor) !important;
}

.sd-input:focus {
    border-color: var(--sjs-primary-backcolor) !important;     /* #00aacc */
    outline: none !important;
    background: var(--sjs-general-backcolor) !important;       /* #ffffff */
}

/* ── Bottone ────────────────────────────────────────────────── */
.sd-btn {
    background-color: var(--sjs-primary-backcolor) !important;        /* #00aacc */
    color: var(--sjs-primary-forecolor) !important;                    /* #ffffff */
    border: none !important;
    border-radius: calc(var(--sjs-corner-radius) * 2.5) !important;   /* ~10px */
    padding: 14px 32px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.sd-btn:hover {
    background-color: var(--sjs-primary-backcolor-dark) !important;   /* rgba(0,157,189,1) */
}

/* ── Checkbox / Radio ───────────────────────────────────────── */

/* Item layout — garantisce riga orizzontale (v2.x usa label come wrapper) */
.sd-item,
.sd-selectbase__item,
.sd-selectbase__label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--sjs-base-unit);                                 /* 8px */
    cursor: pointer;
}

/* Previene che input nativi vengano resi come blocco */
.sd-item input[type="radio"],
.sd-item input[type="checkbox"] {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    flex-shrink: 0;
}

/* Icona circolare */
.sd-item__decorator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--sjs-border-default);               /* rgba(0,0,0,0.16) */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Stato selezionato */
.sd-checkbox--checked .sd-item__decorator {
    background-color: var(--sjs-primary-backcolor);            /* #00aacc */
    border-color: var(--sjs-primary-backcolor);
}

/* Testo label */
.sd-item__control-label {
    font-size: 0.95rem;
    color: var(--sjs-general-forecolor);                       /* rgba(0,0,0,0.91) */
}

/* Bordo accent su "Seleziona tutto" e "Nessuno" */
.sd-selectbase__item--selectall .sd-item__decorator,
.sd-selectbase__item--none .sd-item__decorator {
    border-color: var(--sjs-primary-backcolor);                /* #00aacc */
}

/* Rimuovi aspetto nativo checkbox */
.sd-visuallyhidden + .sd-item__decorator {
    appearance: none;
}