/* Corsi Cityland Comix: colori del sito citylandcomix.com, font ereditati dal tema. */
.ccl-form {
	--ccl-rosso: #e7332a;
	--ccl-rosso-scuro: #d31f16;
	--ccl-rosa: #fff5f4;
	--ccl-testo: #232323;
	--ccl-bordo: #d9d9d9;
	--ccl-grigio: #f8f8f8;
	max-width: 720px;
	color: var(--ccl-testo);
}
.ccl-form [hidden] { display: none !important; }
.ccl-form fieldset { border: 0; padding: 0; margin: 0 0 1.75em; min-width: 0; }
.ccl-form legend { color: var(--ccl-rosso); font-weight: 700; font-size: 1.3em; padding: 0; margin-bottom: .6em; }
.ccl-req { color: var(--ccl-rosso); }

.ccl-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.25em; }
.ccl-campo { margin: 0 0 1em; }
.ccl-campo label { display: block; font-weight: 600; margin-bottom: .3em; }
.ccl-campo input {
	width: 100%;
	box-sizing: border-box;
	padding: .65em .75em;
	border: 1px solid var(--ccl-bordo);
	border-radius: 4px;
	background: #fff;
	font: inherit;
	color: inherit;
}
.ccl-campo input:focus { border-color: var(--ccl-rosso); outline: 2px solid var(--ccl-rosso); outline-offset: 1px; }
.ccl-aiuto { display: block; font-size: .875em; margin-top: .35em; }
.ccl-form a { color: var(--ccl-rosso); text-decoration: underline; }

.ccl-corso {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75em;
	padding: .9em 1em;
	margin-bottom: .6em;
	border: 2px solid var(--ccl-bordo);
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}
.ccl-corso:hover { border-color: var(--ccl-rosso); }
.ccl-corso:has(input:checked) { border-color: var(--ccl-rosso); background: var(--ccl-rosa); }
.ccl-corso:has(input:focus-visible) { outline: 2px solid var(--ccl-rosso); outline-offset: 2px; }
.ccl-corso input { accent-color: var(--ccl-rosso); width: 1.2em; height: 1.2em; margin: 0; flex: none; }
.ccl-corso-nome { font-weight: 700; flex: 1 1 8em; }
.ccl-corso-prezzo { white-space: nowrap; margin-left: auto; }
.ccl-corso.is-esaurito { opacity: .5; cursor: not-allowed; }
.ccl-promo { font-size: .9em; margin: .4em 0 0; }

.ccl-riepilogo { background: var(--ccl-grigio); border-left: 4px solid var(--ccl-rosso); padding: 1em 1.25em; margin: 0 0 1.75em; }
.ccl-riepilogo:empty { display: none; }
.ccl-riepilogo s { opacity: .6; margin-right: .3em; }
.ccl-totale { font-size: 1.4em; font-weight: 700; color: var(--ccl-rosso); }
.ccl-quota { background: var(--ccl-grigio); border-left: 4px solid var(--ccl-rosso); padding: 1em 1.25em; margin: 0 0 1.75em; }

.ccl-check { display: flex; align-items: flex-start; gap: .6em; margin-bottom: .9em; line-height: 1.5; cursor: pointer; }
.ccl-check input { accent-color: var(--ccl-rosso); width: 1.1em; height: 1.1em; margin: .25em 0 0; flex: none; }

.ccl-errori { border: 2px solid var(--ccl-rosso); background: var(--ccl-rosa); border-radius: 6px; padding: .75em 1.25em; margin-bottom: 1.5em; }
.ccl-errori ul { margin: 0; padding-left: 1.1em; }
.ccl-nota { font-size: .875em; }

.ccl-bottone {
	background: var(--ccl-rosso);
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: .9em 2em;
	font: inherit;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	cursor: pointer;
}
.ccl-bottone:hover,
.ccl-bottone:focus-visible { background: var(--ccl-rosso-scuro); }
.ccl-bottone:focus-visible { outline: 2px solid var(--ccl-testo); outline-offset: 2px; }

/* Tema Flash, layout "full-width-center": #primary resta al 65.5% anche su mobile
   (la sua regola responsive perde di specificità) e il modulo finisce in ~250px. */
@media (max-width: 768px) {
	.full-width-center #primary:has(.ccl-form) { width: auto; padding: 0 12px; }
}