/* ——— Pagina iniziale centrata e spaziosa ——— */
.quiz-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(to bottom right, #eef2ff, #ffffff);
  padding: 20px;
}

/* ——— Card elegante ——— */
.quiz-card {
  background: #fff;
  padding: 48px;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  width: min(100% - 2rem, 520px);
}

/* ——— Titolo ——— */
.quiz-card h1 {
  font-size: 2rem;
  color: #2563eb;
  text-align: center;
  margin-bottom: 32px;
}

/* ——— Form layout ——— */
.form-stack {
  display: grid;
  gap: 24px;
}

/* ——— Campi form ——— */
.form-field {
  display: grid;
  gap: 8px;
}
.form-field label {
  font-weight: 600;
  color: #1f2937;
}
.form-field input,
.form-field select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  font-size: 1rem;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
  outline: none;
}

button {
  width: auto;                        /* non più a tutta larghezza */
  padding: 10px 18px;                 /* meno imbottiti */
  font-size: 1rem;                    /* testo normale */
  border-radius: 8px;                 /* meno rotondi */
  background: #2563eb;
  color: white;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
button:hover {
  background: #1d4ed8;
}

.quiz-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;           /* allinea in alto */
  min-height: 100vh;
  background: linear-gradient(to bottom right, #eef2ff, #ffffff);
  padding-top: 8vh;                  /* spazio sopra */
  padding-bottom: 4vh;
}


/* ——— Card quiz ——— */
.quiz-card {
  background: #fff;
  padding: 48px;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  width: min(100% - 2rem, 640px);
}

/* ——— Titolo domanda ——— */
.quiz-card h1 {
  font-size: 1.75rem;
  color: #2563eb;
  text-align: center;
  margin-bottom: 32px;
}

/* ——— Testo domanda ——— */
.quiz-question {
  font-size: 1.2rem;
  margin-bottom: 24px;
  text-align: center;
}

/* ——— Immagine quiz ——— */
.quiz-image {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.quiz-image img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
}

/* ——— Opzioni su card cliccabili ——— */
.quiz-options {
  display: grid;
  gap: 16px;
  margin-bottom: 32px;
}
.option-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
  cursor: pointer;
  transition: background 0.2s ease;
}
.option-card:hover {
  background: #eef2ff;
}
.option-card input[type="radio"] {
  accent-color: #2563eb;
  transform: scale(1.2);
}

/* ——— Pulsante avanti ——— */
.btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn:hover {
  background: #1d4ed8;
}
/* ——— Layout centrale per pagina risultati classe ——— */
.quiz-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  background: linear-gradient(to bottom right, #eef2ff, #ffffff);
  padding-top: 8vh;
  padding-bottom: 4vh;
}

/* ——— Card risultati classe ——— */
.quiz-card {
  background: #fff;
  padding: 48px;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  width: min(100% - 2rem, 720px);
}

/* ——— Titolo ——— */
.quiz-card h1 {
  font-size: 1.75rem;
  color: #2563eb;
  text-align: center;
  margin-bottom: 32px;
}

/* ——— Tabella elegante ——— */
.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
}
.table th, .table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}
.table th {
  background: #f3f4f6;
  text-align: left;
  font-weight: 600;
}
.table tr:nth-child(even) {
  background: #f9fafb;
}

/* ——— Pulsante finale ——— */
.button-row {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.button-row button {
  padding: 10px 18px;
  font-size: 1rem;
  border-radius: 8px;
  background: #2563eb;
  color: white;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-row button:hover {
  background: #1d4ed8;
}
/* ——— Layout adattivo per pagina quiz con immagine ——— */
.quiz-card {
  display: grid;
  gap: 24px;
  padding: 48px;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  width: min(100% - 2rem, 720px);
  max-height: 90vh;               /* evita che la card cresca troppo */
  overflow-y: auto;               /* scroll interno se serve */
}

/* ——— Immagine quiz responsiva e incorniciata ——— */
.quiz-image {
  display: flex;
  justify-content: center;
}
.quiz-image img {
  max-width: 100%;
  max-height: 300px;              /* limite verticale */
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
}
/* ——— Adattamento automatico quando c’è un’immagine ——— */
.quiz-card:has(.quiz-image) {
  padding: 32px;
  font-size: 0.95rem;
}
.quiz-card:has(.quiz-image) h1 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.quiz-card:has(.quiz-image) .quiz-question {
  font-size: 1.1rem;
  margin-bottom: 16px;
}
.quiz-card:has(.quiz-image) .quiz-options {
  gap: 12px;
  margin-bottom: 24px;
}
.quiz-card:has(.quiz-image) button {
  padding: 12px 16px;
  font-size: 0.95rem;
}

/* ——— Immagine contenuta e proporzionata ——— */
.quiz-image img {
  max-height: 240px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  margin-bottom: 16px;
}