/* Compilatore moduli ENAC.
   Griglia a 12 colonne: ogni campo è largo quanto il dato che contiene (le coordinate
   prendono più spazio del raggio in km), così le righe si leggono come frasi e non come
   una scacchiera. Le classi c4...c12 dicono quante colonne occupa il campo. */
.xdmo { max-width: 820px; }

.xdmo-form fieldset {
	border: 1px solid oklch(86% 0.012 85);
	border-radius: 12px;
	padding: 18px 20px 20px;
	margin: 0 0 20px;
	background: oklch(99.5% 0.004 85);
}
.xdmo-form legend {
	padding: 0 8px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.xdmo-form label {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin: 0 0 14px;
	font-weight: 600;
	min-width: 0;
}
.xdmo-form label[hidden] { display: none; }
.xdmo-form fieldset[hidden] { display: none; }
.xdmo-form label span {
	display: block;
	margin-bottom: 2px;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.35;
	color: oklch(48% 0.012 85);
}
.xdmo-form input, .xdmo-form select, .xdmo-form textarea {
	display: block; width: 100%; max-width: 100%; margin-top: 4px; padding: 9px 11px;
	border: 1px solid oklch(80% 0.014 85); border-radius: 8px; font: inherit; background: #fff;
	box-sizing: border-box; /* senza questo padding e bordo escono dalla colonna e si accavallano */
}
.xdmo-form input:focus-visible, .xdmo-form select:focus-visible, .xdmo-form textarea:focus-visible {
	outline: 2px solid oklch(58% 0.19 350); outline-offset: 1px; border-color: transparent;
}
.xdmo-form button {
	padding: 10px 18px; border: 0; border-radius: 8px;
	background: oklch(58% 0.19 350); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.xdmo-form button:hover { background: oklch(52% 0.19 350); }

/* ───────── griglia ───────── */
@media (min-width: 640px) {
	.xdmo-form fieldset { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 20px; align-items: end; }
	.xdmo-form legend { grid-column: 1 / -1; }
	.xdmo-form fieldset > * { grid-column: span 6; }
	/* avvisi, esiti e righe di pulsanti prendono sempre tutta la larghezza */
	.xdmo-form fieldset > p,
	.xdmo-form fieldset > div:not(.xdmo-duo) { grid-column: 1 / -1; }
	.xdmo-form .c4  { grid-column: span 4; }
	.xdmo-form .c5  { grid-column: span 5; }
	.xdmo-form .c6  { grid-column: span 6; }
	.xdmo-form .c7  { grid-column: span 7; }
	.xdmo-form .c12 { grid-column: 1 / -1; }
	/* due campi che si leggono insieme (min/max, aeroporto/distanza) stanno in una cella sola */
	.xdmo-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: end; }
	.xdmo-duo:has(.stretto) { grid-template-columns: 1fr 110px; }
}
.xdmo-form fieldset > p { margin: 2px 0 14px; }
.xdmo-riga { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.xdmo-riga .xdmo-small { flex: 1 1 18rem; }

/* ───────── esiti e avvisi ───────── */
.xdmo-small { font-weight: 400; font-size: 14px; line-height: 1.5; color: oklch(45% 0.012 85); }
.xdmo-avviso { font-size: 14px; background: oklch(97% 0.02 350); border: 1px solid oklch(88% 0.05 350); padding: 12px 14px; border-radius: 10px; }
.xdmo-ok { background: oklch(96% 0.04 150); border: 1px solid oklch(85% 0.07 150); padding: 12px 14px; border-radius: 10px; }
.xdmo-no { background: oklch(96% 0.04 25); border: 1px solid oklch(86% 0.08 25); padding: 12px 14px; border-radius: 10px; }
.xdmo-esito { font-weight: 400; }
.xdmo-esito ul { padding-left: 18px; margin: 8px 0; }
.xdmo-esito li { margin: 0 0 8px; }
.xdmo-esito li.xdmo-scelta { background: oklch(95% 0.02 255); border-radius: 8px; padding: 8px 10px; margin-left: -10px; }
.xdmo-usa {
	padding: 5px 12px; border: 0; border-radius: 7px;
	background: oklch(38% 0.04 265); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.xdmo-usa:hover { background: oklch(32% 0.04 265); }
.xdmo-usa[disabled] { background: oklch(62% 0.01 265); cursor: default; }
.xdmo-dest { font-weight: 400; font-size: 14px; }
.xdmo-dest:not(:empty) { background: oklch(96% 0.02 255); border: 1px solid oklch(88% 0.03 255); padding: 10px 12px; border-radius: 10px; }

/* ───────── storico ───────── */
.xdmo-storico { margin-top: 32px; }
.xdmo-storico ul { padding-left: 18px; }
.xdmo-storico li { margin: 0 0 6px; }

/* «Come si procede»: la lettura delle zone in parole, sotto l'elenco. */
.xdmo-piano { margin: 14px 0 4px; padding: 14px 16px; border: 1px solid oklch(86% 0.03 255); border-radius: 12px; background: oklch(97.5% 0.012 255); }
.xdmo-piano__t { margin: 0 0 8px; font-weight: 700; font-size: 15px; }
.xdmo-piano ol { margin: 0; padding-left: 20px; }
.xdmo-piano li { margin: 0 0 8px; line-height: 1.5; font-size: 14px; }
.xdmo-piano li:last-child { margin-bottom: 0; color: oklch(45% 0.012 85); }

/* «butta via» accanto a ogni modulo salvato: un pulsante che non deve sembrare il pulsante principale */
.xdmo-butta { margin-left: 8px; padding: 2px 8px; border: 1px solid #c9c2b6; border-radius: 999px; background: none; color: #6b6356; font: inherit; font-size: 12px; cursor: pointer; }
.xdmo-butta:hover { border-color: #de3e88; color: #de3e88; }