/* Con box-sizing di default (content-box), un elemento con width fissa/percentuale PIU'
   padding o bordo diventa piu' largo della misura dichiarata - e' quello che, piu' di una
   volta, ha fatto sconfinare la griglia (colonna Domenica) sopra alla barra destra invece di
   starci semplicemente dentro. Un reset qui, una volta per tutte, invece di inseguire il
   problema elemento per elemento. Scoperto solo dentro il calendario per non toccare il tema. */
.myc-calendar-wrapper,
.myc-calendar-wrapper *,
.myc-calendar-wrapper *::before,
.myc-calendar-wrapper *::after {
	box-sizing: border-box;
}

/* Layout Base (WOW Effect) */
.myc-calendar-wrapper {
	font-family: var(--myc-font-family);
	font-size: var(--myc-font-size);
	color: var(--myc-text);
	background: var(--myc-bg);
	border: 1px solid rgba(0,0,0,0.05);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0,0,0,0.06);
	margin-bottom: 40px;
	transition: all 0.3s ease;
}

/* Lista corsi sotto al calendario: solo da mobile (vedi media query), su desktop c'e' gia' la
   barra laterale destra quindi resta nascosta per non mostrare la stessa lista due volte. */
.myc-mobile-courses-list {
	display: none;
}

/* Custom Title */
.myc-custom-title {
	text-align: center;
	color: var(--myc-title-color);
	font-size: var(--myc-title-size);
	font-family: var(--myc-title-font);
	margin: 0 0 20px 0;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Top Bar (Categorie) */
.myc-top-bar {
	background: rgba(255,255,255,0.7);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(0,0,0,0.05);
	padding: 30px 20px;
}
.myc-category-filter {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.myc-category-filter li {
	width: 230px;
	text-align: center;
	padding: 10px 20px;
	background: #fff;
	/* "Tutti i corsi" non ha un colore proprio (--myc-cat-color non impostata): resta col testo/
	   bordo neutri di default. Le altre due mostrano sempre il proprio colore, anche da inattive. */
	color: var(--myc-cat-color, var(--myc-text));
	border: 1px solid var(--myc-cat-color, rgba(0,0,0,0.08));
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	font-size: 0.9em;
	font-weight: 500;
	box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.myc-category-filter li:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.myc-category-filter li.active {
	background: var(--myc-cat-color, var(--myc-primary));
	color: #fff;
	border-color: var(--myc-cat-color, var(--myc-primary));
	box-shadow: 0 6px 15px var(--myc-cat-color, var(--myc-primary));
	opacity: 0.9;
}

/* Main Container: 3 Colonne */
.myc-main-container {
	display: flex;
	flex-wrap: nowrap;
	/* Le tre colonne (bordi/sfondi inclusi) arrivano sempre a fine riga, altezza della piu'
	   alta: senza, quella piu' corta si fermava prima creando un bordo "spezzato" in fondo.
	   La lista corsi a destra ora ha un tetto massimo (vedi .myc-sidebar-content), quindi
	   non e' piu' lei a rendere la riga eccessivamente alta. */
	align-items: stretch;
	/* Le tre colonne ora si restringono in proporzione (vedi flex-basis/min-width di ciascuna)
	   invece di restare a larghezza fissa: lo scorrimento orizzontale resta solo come ultima
	   rete di sicurezza, per larghezze piu' strette di quanto i minimi permettano. */
	overflow-x: auto;
	/* Su schermi molto larghi le tre colonne non crescono oltre il loro massimo, restando
	   centrate - ma con margin:auto, non con justify-content:center: quest'ultimo, insieme
	   a overflow-x:auto, in certe larghezze intermedie faceva sovrapporre le colonne invece
	   di restringerle (colonna destra sopra alla griglia, domenica nascosta). */
	max-width: 1800px;
	margin-left: auto;
	margin-right: auto;
}

/* Colonna Sinistra: Anno + Mesi */
.myc-left-col {
	flex: 0 1 220px;
	min-width: 170px; /* niente flex-basis in altezza da mobile: viene azzerata li' (vedi media query) */
	padding-top: 30px; /* Stesso padding-top di .myc-center-col: allinea l'anno con l'intestazione dei giorni della settimana */
	border-right: 1px solid rgba(0,0,0,0.05);
	background: var(--myc-left-col-bg, rgba(250, 250, 252, 0.5));
}
.myc-year-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	height: 41px;
	box-sizing: border-box;
	padding: 0 15px;
	margin-bottom: 15px;
	border-bottom: 2px solid var(--myc-border-color);
}
.myc-year-nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 6px;
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	flex: 0 0 28px;
	line-height: 1;
	font-size: 1.1em;
	cursor: pointer;
	color: var(--myc-text);
	transition: all 0.2s;
}
.myc-year-nav button:hover {
	background: var(--myc-primary);
	color: #fff;
	border-color: var(--myc-primary);
}
.myc-year-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	font-weight: 700;
	font-size: 1.05em;
	color: var(--myc-text);
	min-width: 3.5em;
	text-align: center;
}
.myc-month-selector {
	list-style: none;
	margin: 0;
	padding: 0;
}
.myc-month-selector li {
	padding: 5px 15px;
	margin-bottom: 5px;
	cursor: pointer;
	border-radius: 6px;
	transition: all 0.2s;
	font-weight: 500;
	position: relative;
	color: var(--myc-text);
}
.myc-month-selector li:hover {
	background: var(--myc-month-hover-bg);
}
.myc-month-selector li.active {
	background: var(--myc-month-active-bg);
	color: var(--myc-primary);
	font-weight: 700;
}
.myc-month-selector li.active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 4px;
	background: var(--myc-primary);
	border-radius: 0 4px 4px 0;
}
.myc-month-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--myc-primary);
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
	margin-left: 5px;
	vertical-align: middle;
}

/* Colonna Centrale: Calendario */
.myc-center-col {
	/* Colonna fluida: si restringe/allarga insieme alla finestra tra un minimo (sotto al quale
	   i quadrati sarebbero troppo piccoli per essere cliccabili comodamente) e un massimo (oltre
	   il quale sarebbero inutilmente grandi). I quadrati stessi usano colonne "fr" (vedi
	   .myc-grid-header/.myc-grid-body), quindi si ridimensionano di conseguenza.
	   flex-basis 700 (non 400): e' il "peso" usato per calcolare quanto si restringe rispetto
	   alle altre due colonne - un peso piu' alto vuol dire che la griglia resta piu' grande e
	   sono le colonne laterali (flex-shrink piu' alto) a restringersi per prime.
	   ATTENZIONE: flex-shrink deve restare un numero INTERO (1, non 0.3) - testato dal vivo sul
	   sito: con uno shrink sotto 1 il calcolo va storto e la colonna resta piu' larga di quanto
	   lo spazio disponibile permetta, causando lo scroll orizzontale indesiderato e la barra
	   destra "tagliata" fuori dallo schermo invece di restringersi correttamente. */
	flex: 1 1 700px;
	min-width: 380px;
	max-width: 900px;
	padding: 30px;
	position: relative;
	background: #fff;
	/* Permette a "Lun Mar Mer..." e ai numeri dei giorni di rimpicciolire in base allo spazio
	   REALE di questa colonna (non alla larghezza della finestra intera, che con tre colonne
	   fluide non e' la stessa cosa): vedi le regole @container piu' sotto. */
	container-type: inline-size;
	container-name: myc-grid;
}
.myc-loader {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(255,255,255,0.7);
	backdrop-filter: blur(5px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}
.myc-spinner {
	width: 40px;
	height: 40px;
	border: 4px solid rgba(0,0,0,0.1);
	border-top-color: var(--myc-primary);
	border-radius: 50%;
	animation: myc-spin 1s linear infinite;
}
@keyframes myc-spin { 100% { transform: rotate(360deg); } }

.myc-grid {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.myc-grid-header {
	display: grid;
	grid-template-columns: repeat(7, 1fr); /* fluide: si restringono/allargano con .myc-center-col */
	gap: 10px; /* stesso gap di .myc-grid-body: senza, essendo le due griglie di larghezza totale diversa, le colonne non si allineano */
	text-align: center;
	font-weight: 700;
	margin-bottom: 15px;
	color: var(--myc-text);
	opacity: 0.8;
	height: 41px; /* stessa altezza di .myc-year-nav: le due linee restano allineate a prescindere dal font */
	box-sizing: border-box;
}
.myc-grid-header div {
	height: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border-bottom: 2px solid var(--myc-border-color);
}
.myc-grid-body {
	display: grid;
	grid-template-columns: repeat(7, 1fr); /* fluide: si restringono/allargano con .myc-center-col */
	gap: 10px;
}
.myc-grid-cell {
	/* box-sizing:border-box e' essenziale qui: senza, padding e bordo si sommano al 100% di
	   larghezza invece di starci dentro, quindi ogni quadrato finisce 14px piu' largo della sua
	   colonna nella griglia - su 7 colonne sono quasi 100px di troppo, ed e' esattamente quello
	   che spingeva l'ultima colonna (Domenica) a toccare/sconfinare nella barra destra. */
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1 / 1; /* resta sempre un quadrato: l'altezza segue la larghezza, che ora e' fluida (1fr) */
	border: 1px solid var(--myc-border-color);
	border-radius: 12px;
	padding: 6px;
	background: var(--myc-cell-bg);
	display: flex;
	flex-direction: column;
	align-items: center; /* numero e pallini centrati nel quadrato, non piu' incollati a sinistra */
	position: relative;
	transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
/* Da PC il quadrato si tinge del colore della categoria (o meta'/meta' se sono due) invece dei
   pallini: var(--myc-cell-fill) e' la sfumatura calcolata in PHP, impostata solo se ci sono corsi. */
.myc-grid-cell.has-courses {
	background: var(--myc-cell-fill, var(--myc-cell-bg));
}
.myc-grid-cell:not(.empty):hover {
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
	transform: translateY(-2px);
}
.myc-grid-cell.empty {
	background: transparent;
	border: none;
}
.myc-day-number {
	font-weight: 600;
	margin-bottom: 8px;
	font-size: 0.95em;
	/* Diventa bianco (via --myc-day-number-color, impostata in PHP) solo da PC quando lo sfondo
	   pieno della categoria e' scuro: senza, il numero sparirebbe sopra un colore scuro. */
	color: var(--myc-day-number-color, #4b5563);
}
/* Contenitore di pallini + numero corsi: da PC il numero esce da qui (position:absolute
   nell'angolo, vedi sotto), da mobile restano affiancati nella stessa riga (vedi media query). */
.myc-day-indicators {
	margin-top: auto;
}
/* Pallini colorati per categoria: solo su mobile (vedi media query), qui su PC restano
   nascosti perche' il colore ce l'ha gia' lo sfondo del quadrato. */
.myc-day-cat-dots {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
}
.myc-cat-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}
/* Da PC il numero di corsi resta in un angolo, leggibile su qualunque colore di sfondo grazie
   al pallino bianco. Su mobile torna un semplice testo accanto ai pallini (vedi media query). */
.myc-day-count {
	position: absolute;
	bottom: 6px;
	right: 6px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	font-size: 0.65em;
	font-weight: 700;
	color: var(--myc-text);
	line-height: 1;
}
.myc-grid-cell.has-courses {
	cursor: pointer;
}
.myc-grid-cell.is-selected-day {
	border-color: var(--myc-primary);
	box-shadow: 0 0 0 2px var(--myc-primary) inset;
}

/* "Lun Mar Mer..." e i numeri dei giorni si rimpiccioliscono quando la colonna centrale si
   restringe (schermi tra i 992px e circa i 700px), cosi' restano leggibili e non spingono
   la griglia a farsi piu' larga di quanto la colonna destra le lasci spazio. Sotto i 600px
   vince comunque la versione mobile dedicata (viene dopo nel file).
   ATTENZIONE ALL'ORDINE: un contenitore piu' stretto di 550px soddisfa ANCHE la condizione
   "max-width:700px" - quindi il blocco piu' aggressivo (550px) deve stare DOPO quello meno
   aggressivo (700px) per vincere nella cascata, altrimenti (come succedeva prima) il blocco
   700px, arrivando dopo, sovrascriveva sempre l'altro e i quadrati piccolissimi non
   rimpicciolivano mai testo/numero quanto dovrebbero - verificato sul sito vero. */
@container myc-grid (max-width: 700px) {
	.myc-grid-header div {
		font-size: 0.85em;
	}
	.myc-day-number {
		font-size: 0.85em;
		margin-bottom: 6px;
	}
	.myc-day-count {
		bottom: 4px;
		right: 4px;
		min-width: 14px;
		height: 14px;
		padding: 0 3px;
		font-size: 0.6em;
	}
	.myc-cat-dot {
		width: 10px;
		height: 10px;
	}
}
@container myc-grid (max-width: 550px) {
	.myc-grid-header div {
		font-size: 0.7em;
		padding: 0 4px;
	}
	.myc-day-number {
		font-size: 0.7em;
		margin-bottom: 4px;
	}
	.myc-day-count {
		bottom: 3px;
		right: 3px;
		min-width: 13px;
		height: 13px;
		padding: 0 3px;
		font-size: 0.55em;
	}
	.myc-cat-dot {
		width: 8px;
		height: 8px;
	}
}

/* Colonna Destra: Sidebar (elenco corsi del giorno selezionato) */
.myc-right-col {
	/* shrink 3 (alto): si restringe verso il suo minimo prima e piu' velocemente della griglia,
	   invece di tenersi larga mentre la griglia viene schiacciata (vedi nota su .myc-center-col). */
	flex: 0 3 653px;
	min-width: 265px;
	border-left: 1px solid rgba(0,0,0,0.05);
	background: var(--myc-right-col-bg, rgba(250, 250, 252, 0.5));
	/* Niente padding a destra qui: sposiamo quello spazio dentro .myc-sidebar-content, cosi'
	   la barra di scorrimento finisce esattamente sul bordo destro del container, non "in aria". */
	padding: 30px 0 30px 25px;
	position: relative;
}
.myc-sidebar-content {
	/* height:100% qui non funziona: dentro un flex item stirato (align-items:stretch), la
	   percentuale viene risolta PRIMA che l'altezza del container sia definitiva, quindi il
	   browser la tratta come "auto" - il contenuto cresce libero e si porta dietro tutta la
	   colonna (e le altre due, essendo stirate), invece di fermarsi e scorrere. Un valore fisso
	   e' l'unico modo per avere davvero un tetto: qui e' tarato per circa 4 card corso. */
	max-height: 650px;
	overflow-y: auto;
	padding-right: 25px; /* la barra di scorrimento appoggia sul bordo del container, il testo resta staccato da essa */
	scrollbar-width: thin; /* Firefox: barra sottile, niente frecce di suo */
	scrollbar-color: rgba(0,0,0,0.18) transparent;
}
/* Scrollbar senza le frecce agli estremi (datate): resta solo una barretta sottile arrotondata. */
.myc-sidebar-content::-webkit-scrollbar {
	width: 8px;
}
.myc-sidebar-content::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}
.myc-sidebar-content::-webkit-scrollbar-track {
	background: transparent;
}
.myc-sidebar-content::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,0.18);
	border-radius: 4px;
}
.myc-sidebar-content::-webkit-scrollbar-thumb:hover {
	background: rgba(0,0,0,0.3);
}
.myc-sidebar-close {
	display: none;
	position: absolute;
	top: 16px;
	right: 16px;
	width: auto;
	height: auto;
	border: none;
	background: transparent;
	font-size: 1.8em;
	line-height: 1;
	color: #6b7280;
	cursor: pointer;
	box-shadow: none;
	padding: 4px;
	z-index: 2;
}
.myc-widget {
	margin-bottom: 20px;
}
.myc-sidebar-empty {
	color: var(--myc-text);
	opacity: 0.7;
	font-size: 0.9em;
}
.myc-sidebar-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 0;
}
.myc-spinner-small {
	width: 24px;
	height: 24px;
	border-width: 3px;
}

/* Card corso nella sidebar: barra laterale colorata secondo la categoria del corso */
.myc-course-card {
	background: #fff;
	border-radius: 8px;
	border-left: 4px solid var(--myc-primary);
	padding: 14px 16px;
	margin-bottom: 14px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.myc-course-card:last-child {
	margin-bottom: 0;
}
.myc-course-card-title {
	margin: 0 0 6px 0;
	font-size: 1em;
	font-weight: 700;
	color: var(--myc-text);
}
.myc-course-card-desc {
	margin: 0 0 12px 0;
	font-size: 0.85em;
	line-height: 1.5;
	color: #6b7280;
}
.myc-course-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.myc-course-card-dates {
	font-size: 0.8em;
	font-weight: 600;
	color: #6b7280;
}
.myc-course-card-btn {
	margin-left: auto;
	padding: 8px 16px;
	font-size: 0.85em;
}

.myc-btn {
	display: inline-block;
	padding: 12px 25px;
	text-decoration: none;
	border-radius: 8px;
	font-weight: 600;
	text-align: center;
	transition: all 0.3s ease;
}
.myc-btn-primary {
	background: var(--myc-primary);
	color: #fff;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.myc-btn-primary:hover {
	background: #111827;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Mobile Responsive */
@media (max-width: 992px) {
	.myc-main-container {
		flex-direction: column;
	}
	/* "Tutti i corsi" sopra a tutta larghezza, le altre due categorie affiancate sotto
	   (meta' larghezza ciascuna): niente piu' righe che scorrono, ci stanno sempre in due righe ordinate. */
	.myc-category-filter {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.myc-category-filter li {
		width: auto;
	}
	.myc-category-filter li:first-child {
		grid-column: 1 / -1;
	}
	.myc-left-col {
		/* QUESTO era il vero buco sotto ai mesi: .myc-main-container qui e' in colonna, quindi
		   "flex-basis" (220px, larghezza su desktop) diventa un'ALTEZZA minima forzata - la
		   colonna restava alta 220px anche se anno+mesi ne occupano solo ~95, lasciando un
		   grosso vuoto sotto. Verificato sul sito vero: senza flex-basis:auto l'altezza reale
		   era esattamente 220px, indipendentemente dal contenuto. */
		flex-basis: auto;
		width: 100%;
		padding-top: 0;
		border-right: none;
		border-bottom: 1px solid rgba(0,0,0,0.05);
	}
	.myc-month-selector {
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
	}
	.myc-year-nav {
		margin-bottom: 8px; /* meno spazio tra anno e mesi, per non allungare inutilmente tutta la fascia */
	}
	.myc-month-selector li {
		border-bottom: none;
		border-right: 1px solid rgba(0,0,0,0.05);
		padding: 8px 16px;
		margin-bottom: 0; /* qui i mesi sono in riga, non in colonna: il margine sotto (ereditato da desktop) creava solo spazio vuoto */
	}
	.myc-month-selector li.active::before {
		width: 100%; height: 3px;
		left: 0; top: auto; bottom: 0;
		border-radius: 4px 4px 0 0;
	}
	.myc-center-col {
		/* Stesso motivo di .myc-left-col qui sopra: senza, i 700px di flex-basis (larghezza
		   desktop) diventano un'altezza minima forzata qui in colonna. */
		flex-basis: auto;
		min-width: 0;
		max-width: none;
		width: 100%;
		padding: 20px 15px;
	}

	/* Sidebar mobile: nascosta di default, entra da destra verso sinistra al click su un giorno con corsi.
	   Occupa tutto lo schermo: si chiude solo con la X, quindi niente overlay cliccabile dietro. */
	.myc-right-col {
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		border-left: none;
		background: var(--myc-right-col-bg, #fff);
		box-shadow: -10px 0 30px rgba(0,0,0,0.15);
		padding: 60px 20px 20px;
		transform: translateX(100%);
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
		z-index: 100000;
		overflow-y: auto;
	}
	.myc-right-col.myc-open {
		transform: translateX(0);
	}
	/* Qui a schermo intero e' gia' la colonna stessa a scorrere: il tetto massimo di
	   .myc-sidebar-content (pensato per la colonna desktop) non serve. */
	.myc-sidebar-content {
		max-height: none;
		overflow-y: visible;
		padding-right: 0;
	}
	.myc-sidebar-close {
		display: block;
	}

	/* Stessa lista della barra destra, ma qui sotto sempre visibile nel flusso della pagina:
	   niente bottone di chiusura, non serve, si scorre semplicemente oltre. Stesso limite di
	   altezza (circa 3 corsi) della colonna destra desktop, cosi' non allunga tutta la pagina. */
	.myc-mobile-courses-list {
		display: block;
		max-height: 500px;
		overflow-y: auto;
		padding: 20px 15px 25px;
		border-top: 1px solid rgba(0,0,0,0.05);
		background: var(--myc-right-col-bg, rgba(250, 250, 252, 0.5));
		scrollbar-width: thin;
		scrollbar-color: rgba(0,0,0,0.18) transparent;
	}
	.myc-mobile-courses-list::-webkit-scrollbar {
		width: 8px;
	}
	.myc-mobile-courses-list::-webkit-scrollbar-button {
		display: none;
		width: 0;
		height: 0;
	}
	.myc-mobile-courses-list::-webkit-scrollbar-track {
		background: transparent;
	}
	.myc-mobile-courses-list::-webkit-scrollbar-thumb {
		background: rgba(0,0,0,0.18);
		border-radius: 4px;
	}
}
@media (max-width: 600px) {
	/* Pulsanti categoria leggermente piu' piccoli sui telefoni: il layout a griglia
	   (Tutti i corsi sopra, le altre due sotto) resta quello del breakpoint a 992px. */
	.myc-category-filter li {
		padding: 8px 10px;
		font-size: 0.8em;
	}

	/* Sotto i 600px una griglia di caselle 100x100 non ci starebbe (7 x 100px = 700px + gap):
	   le rimpiccioliamo solo qui per non far uscire il calendario dallo schermo. Stesso gap
	   di .myc-grid-body qui sotto, altrimenti le due griglie tornano a disallinearsi. */
	.myc-grid-header {
		grid-template-columns: repeat(7, 40px);
		gap: 6px;
	}
	.myc-grid-header div {
		font-size: 0.75em;
	}
	.myc-grid-body {
		grid-template-columns: repeat(7, 40px);
		gap: 6px;
	}
	.myc-grid-cell {
		width: 40px;
		height: 40px;
		padding: 4px;
		border-radius: 8px;
	}
	/* Su mobile restano i pallini colorati (non lo sfondo tinto) col numero accanto, non in
	   un angolo: qui il quadrato e' troppo piccolo per un pallino separato in un angolo. */
	.myc-grid-cell.has-courses {
		background: var(--myc-cell-bg);
	}
	/* Pallini e numero affiancati nella stessa riga, centrati insieme come un unico blocco:
	   prima il numero stava per conto suo nell'angolo, sembravano due elementi scollegati. */
	.myc-day-indicators {
		display: flex;
		align-items: center;
		gap: 4px;
		margin-bottom: 2px; /* i pallini toccavano/uscivano dal bordo inferiore del quadrato: li solleva un po' */
	}
	.myc-day-cat-dots {
		display: flex;
		flex-wrap: nowrap; /* ereditava "wrap" dalla regola base (per il desktop, li' nascosta): con 2 categorie
		                      il secondo pallino andava a capo invece di restare in riga, alzando il blocco e
		                      facendolo sbordare dal quadrato - verificato dal vivo. */
		gap: 3px;
	}
	.myc-cat-dot {
		width: 6px;
		height: 6px;
	}
	/* Numeri e pallini più piccoli: nel quadrato 40x40 devono starci entrambi. Colore sempre
	   quello normale: qui lo sfondo del quadrato resta semplice, non il colore della categoria. */
	.myc-day-number {
		font-size: 0.65em;
		margin-bottom: 2px;
		color: #4b5563;
	}
	.myc-day-count {
		position: static;
		min-width: 0;
		height: auto;
		padding: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		font-size: 0.55em;
		font-weight: 700;
		color: var(--myc-text);
		opacity: 0.75;
	}
}

/* Date corso mostrate sotto la descrizione breve nella scheda prodotto WooCommerce collegata.
   Colori (sfondo/testo/accento) impostati inline dal PHP in base al calendario collegato. */
.myc-product-course-dates {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 16px 0;
	padding: 14px 18px;
	border-radius: 10px;
	border-left: 4px solid;
}
.myc-product-course-dates .myc-pd-icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	font-size: 18px;
}
.myc-product-course-dates .myc-pd-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.myc-product-course-dates .myc-pd-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	opacity: 0.75;
}
.myc-product-course-dates .myc-pd-value {
	font-size: 15px;
	font-weight: 700;
}

/* Modalità del corso (In aula / Videoconferenza / e-Learning) sopra le date, scheda prodotto.
   Tre blocchi allineati su una griglia, ciascuno su due righe: nome sopra, icona + scelta sotto. */
.myc-product-course-modes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr; /* tutte le card alla stessa altezza */
	align-items: stretch;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	box-sizing: border-box;
}
.myc-product-course-modes *,
.myc-product-course-modes *::before,
.myc-product-course-modes *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
.myc-product-course-modes .myc-pm-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	min-height: 78px;
	padding: 12px 8px;
	border-radius: 10px;
	border: 1px solid;
	text-align: center;
}
.myc-product-course-modes .myc-pm-label {
	display: block;
	font-size: 11px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	opacity: 0.85;
	overflow-wrap: anywhere;
}
.myc-product-course-modes .myc-pm-choice {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	line-height: 1;
}
.myc-product-course-modes .myc-pm-value {
	display: block;
	font-size: 16px;
	line-height: 22px; /* stessa altezza dell'icona: allineamento verticale perfetto */
	font-weight: 700;
}
.myc-product-course-modes .myc-pm-icon {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 12px;
	line-height: 1;
	color: #fff;
}
.myc-product-course-modes .myc-pm-yes {
	background: #ecfdf3;
	border-color: #86efac;
	color: #15803d;
}
.myc-product-course-modes .myc-pm-yes .myc-pm-icon {
	background: #16a34a;
}
.myc-product-course-modes .myc-pm-yes-blue {
	background: #eff6ff;
	border-color: #93c5fd;
	color: #1d4ed8;
}
.myc-product-course-modes .myc-pm-yes-blue .myc-pm-icon {
	background: #2563eb;
}
.myc-product-course-modes .myc-pm-yes-purple {
	background: #f5f3ff;
	border-color: #c4b5fd;
	color: #6d28d9;
}
.myc-product-course-modes .myc-pm-yes-purple .myc-pm-icon {
	background: #7c3aed;
}
.myc-product-course-modes .myc-pm-no {
	background: #fef2f2;
	border-color: #fca5a5;
	color: #b91c1c;
}
.myc-product-course-modes .myc-pm-no .myc-pm-icon {
	background: #dc2626;
}
@media (max-width: 480px) {
	.myc-product-course-modes {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}
	.myc-product-course-modes .myc-pm-item {
		flex-direction: row;
		justify-content: space-between;
		min-height: 0;
		padding: 10px 14px;
	}
	.myc-product-course-modes .myc-pm-label {
		text-align: left;
	}
}