/*
 * AIFEC Area Corsi — design system moderno (autocontenuto).
 *
 * Sostituisce di fatto le classi legacy ereditate dal porting Studio Ambiente H.A.C.C.P.
 * (input_form_text, button_go_on, section_80pct, header_area_corsi_login, ecc.) senza
 * richiedere modifiche dei markup esistenti, e fornisce un set di classi moderne `.aif-*`
 * per i nuovi componenti.
 *
 * Tutti i selettori sono prefissati o specifici al body dell'area corsi per evitare
 * collisioni con il main.css della vetrina AIFEC.
 *
 * Convenzione token: --aif-<categoria>-<scala>.
 */

/* ============================================================================
 * 1. Reset minimale (compatibile con normalize.css già caricato dalle pagine)
 * ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* ============================================================================
 * 2. Design tokens
 * ========================================================================== */
:root {
	/* Palette AIFEC (verde + neutri moderni) */
	--aif-color-primary:        #1B5E20;
	--aif-color-primary-hover:  #2E7D32;
	--aif-color-primary-active: #154A18;
	--aif-color-primary-soft:   #E8F5E9;
	--aif-color-primary-ring:   rgba(27, 94, 32, 0.16);

	--aif-color-accent:         #B68E16;
	--aif-color-accent-soft:    #FFF7DA;

	--aif-color-bg:             #F5F7FA;
	--aif-color-surface:        #FFFFFF;
	--aif-color-surface-alt:    #F8FAFC;

	--aif-color-text:           #0F172A;
	--aif-color-text-muted:     #475569;
	--aif-color-text-placeholder:#94A3B8;
	--aif-color-border:         #E2E8F0;
	--aif-color-border-strong:  #CBD5E1;

	--aif-color-success:        #15803D;
	--aif-color-success-soft:   #DCFCE7;
	--aif-color-error:          #B91C1C;
	--aif-color-error-soft:     #FEE2E2;
	--aif-color-warning:        #B45309;
	--aif-color-warning-soft:   #FEF3C7;
	--aif-color-info:           #1D4ED8;
	--aif-color-info-soft:      #DBEAFE;

	/* Type scale */
	--aif-font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--aif-fs-xs:   12px;
	--aif-fs-sm:   14px;
	--aif-fs-md:   16px;
	--aif-fs-lg:   18px;
	--aif-fs-xl:   20px;
	--aif-fs-2xl:  24px;
	--aif-fs-3xl:  30px;
	--aif-fs-4xl:  36px;

	/* Spacing scale (8px grid) */
	--aif-sp-1:  4px;
	--aif-sp-2:  8px;
	--aif-sp-3:  12px;
	--aif-sp-4:  16px;
	--aif-sp-5:  20px;
	--aif-sp-6:  24px;
	--aif-sp-8:  32px;
	--aif-sp-10: 40px;
	--aif-sp-12: 48px;
	--aif-sp-16: 64px;

	/* Radius */
	--aif-radius-sm:  4px;
	--aif-radius-md:  8px;
	--aif-radius-lg:  12px;
	--aif-radius-xl:  16px;
	--aif-radius-full: 9999px;

	/* Shadow */
	--aif-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06);
	--aif-shadow-md:  0 4px 16px rgba(15, 23, 42, 0.08);
	--aif-shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.10);
	--aif-shadow-focus: 0 0 0 3px var(--aif-color-primary-ring);

	/* Layout */
	--aif-container-max: 1120px;
	--aif-container-narrow: 720px;
	--aif-container-form:   520px;
}

/* ============================================================================
 * 3. Body / typography baseline
 * ========================================================================== */
body {
	margin: 0;
	background: var(--aif-color-bg);
	color: var(--aif-color-text);
	font-family: var(--aif-font-base);
	font-size: var(--aif-fs-md);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'cv02', 'cv03', 'cv11';
}

a {
	color: var(--aif-color-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}
a:hover { color: var(--aif-color-primary-hover); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--aif-color-primary); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 {
	color: var(--aif-color-text);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 var(--aif-sp-3);
	line-height: 1.25;
}
h1 { font-size: var(--aif-fs-3xl); }
h2 { font-size: var(--aif-fs-2xl); }
h3 { font-size: var(--aif-fs-xl); }
h4 { font-size: var(--aif-fs-lg); }

p { margin: 0 0 var(--aif-sp-3); color: var(--aif-color-text); }

hr {
	border: 0;
	border-top: 1px solid var(--aif-color-border);
	margin: var(--aif-sp-6) 0;
}

/* ============================================================================
 * 4. Header (corsista + ACP)
 * ========================================================================== */
.site-header,
.aif-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--aif-color-border);
}

.site-header .header_area_corsi_login,
.site-header .navbar,
.aif-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--aif-sp-4);
	max-width: var(--aif-container-max);
	margin: 0 auto;
	padding: var(--aif-sp-3) var(--aif-sp-6);
	min-height: 56px;
}

.site-header .logo_link,
.aif-header__brand {
	font-weight: 700;
	font-size: var(--aif-fs-md);
	color: var(--aif-color-primary);
	text-decoration: none;
	letter-spacing: 0.01em;
	display: inline-flex;
	align-items: center;
	gap: var(--aif-sp-2);
}
.site-header .logo_link:hover,
.aif-header__brand:hover { color: var(--aif-color-primary-hover); text-decoration: none; }

.site-header .link_right,
.aif-header__link {
	color: var(--aif-color-text-muted);
	font-size: var(--aif-fs-sm);
	font-weight: 500;
	padding: var(--aif-sp-2) var(--aif-sp-3);
	border-radius: var(--aif-radius-md);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.site-header .link_right:hover,
.aif-header__link:hover {
	background: var(--aif-color-primary-soft);
	color: var(--aif-color-primary);
	text-decoration: none;
}

/* Hamburger (legacy haccp) — non usato in AIFEC, ma evita lo styling default */
.site-header .icon { display: none; }

/* ============================================================================
 * 5. Container e sezioni
 * ========================================================================== */
.aif-container {
	max-width: var(--aif-container-max);
	margin: 0 auto;
	padding: 0 var(--aif-sp-6);
}
.aif-container--narrow { max-width: var(--aif-container-narrow); }
.aif-container--form   { max-width: var(--aif-container-form); }

/* Legacy haccp "section_80pct" + "margin_top_bottom_100px" + "div_section_*"
 * mappati a un layout pulito, centrato. */
.section_80pct {
	display: block;
	max-width: var(--aif-container-form);
	margin: var(--aif-sp-10) auto;
	padding: 0 var(--aif-sp-6);
	width: 100%;
}
.margin_top_bottom_100px { margin-top: var(--aif-sp-12); margin-bottom: var(--aif-sp-12); }

.div_section_100pct,
.div_section_90pct,
.div_section_80pct,
.div_section_70pct {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* Section_90pct usato in dashboard-course */
.section_90pct {
	display: block;
	max-width: var(--aif-container-max);
	margin: var(--aif-sp-8) auto;
	padding: 0 var(--aif-sp-6);
	width: 100%;
}

/* Sostituisce il <center> legacy: text-align lasciato a livello container */
center, .legacy-center { display: block; text-align: center; }
center > *, .legacy-center > * { text-align: initial; }

/* ============================================================================
 * 6. Title (legacy "site-title")
 * ========================================================================== */
.site-title, .aif-title {
	font-size: var(--aif-fs-3xl);
	font-weight: 800;
	color: var(--aif-color-text);
	text-align: center;
	margin: 0 0 var(--aif-sp-2);
	letter-spacing: -0.02em;
}
.aif-subtitle {
	text-align: center;
	color: var(--aif-color-text-muted);
	margin: 0 0 var(--aif-sp-8);
	font-size: var(--aif-fs-md);
}
/* Sottolineatura decorativa */
.site-title::after, .aif-title::after {
	content: '';
	display: block;
	width: 56px;
	height: 3px;
	background: var(--aif-color-primary);
	border-radius: var(--aif-radius-full);
	margin: var(--aif-sp-3) auto 0;
}

/* ============================================================================
 * 7. Card (form / corso / generic)
 * ========================================================================== */
.aif-card {
	background: var(--aif-color-surface);
	border: 1px solid var(--aif-color-border);
	border-radius: var(--aif-radius-lg);
	padding: var(--aif-sp-8) var(--aif-sp-6);
	box-shadow: var(--aif-shadow-md);
}
.aif-card--tight { padding: var(--aif-sp-4); }
.aif-card--lg    { padding: var(--aif-sp-10) var(--aif-sp-8); }

/* Apply automaticamente alle div_section_100pct con padding inline > usate per
 * i form di login/signup. Specifico: solo dentro section_80pct. */
.section_80pct > .div_section_100pct {
	background: var(--aif-color-surface);
	border: 1px solid var(--aif-color-border);
	border-radius: var(--aif-radius-lg);
	padding: var(--aif-sp-8) var(--aif-sp-6) !important;
	box-shadow: var(--aif-shadow-md);
	text-align: left;
}

/* ============================================================================
 * 8. Form input
 * ========================================================================== */
.input_form_text,
.input-text,
.aif-input {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: var(--aif-sp-2) 0;
	padding: var(--aif-sp-3) var(--aif-sp-4);
	font: inherit;
	font-size: var(--aif-fs-md);
	color: var(--aif-color-text);
	background: var(--aif-color-surface);
	border: 1px solid var(--aif-color-border);
	border-radius: var(--aif-radius-md);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.input_form_text::placeholder,
.input-text::placeholder,
.aif-input::placeholder { color: var(--aif-color-text-placeholder); }
.input_form_text:hover,
.input-text:hover,
.aif-input:hover { border-color: var(--aif-color-border-strong); }
.input_form_text:focus,
.input-text:focus,
.aif-input:focus {
	outline: 0;
	border-color: var(--aif-color-primary);
	box-shadow: var(--aif-shadow-focus);
}
.input_form_text:disabled,
.input-text:disabled,
.aif-input:disabled { background: var(--aif-color-surface-alt); color: var(--aif-color-text-muted); cursor: not-allowed; }

/* Layout a colonne dei form: 2 input affiancati se ce ne sono di consecutivi */
.aif-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--aif-sp-3);
}
.aif-field-row--single { grid-template-columns: 1fr; }
@media (max-width: 540px) {
	.aif-field-row { grid-template-columns: 1fr; }
}

label {
	display: inline-block;
	font-size: var(--aif-fs-sm);
	color: var(--aif-color-text-muted);
	font-weight: 500;
	margin: var(--aif-sp-3) 0 var(--aif-sp-1);
}
.aif-label-block { display: block; margin: var(--aif-sp-3) 0 var(--aif-sp-1); }

/* Input wrapper con icona destra (eye toggle password) */
.aif-input-icon {
	position: relative;
	display: block;
}
.aif-input-icon input { padding-right: 42px; }
.aif-input-icon .pw-eye-toggle,
.aif-input-icon #toggle-eye-password,
.aif-input-icon #toggle-eye-email {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--aif-color-text-muted);
	cursor: pointer;
	padding: var(--aif-sp-1);
	border-radius: var(--aif-radius-sm);
	transition: color 0.15s ease, background 0.15s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.aif-input-icon .pw-eye-toggle:hover,
.aif-input-icon #toggle-eye-password:hover { color: var(--aif-color-primary); background: var(--aif-color-primary-soft); }

/* ============================================================================
 * 9. Bottoni
 * ========================================================================== */
.button_go_on,
.btn,
.aif-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--aif-sp-2);
	padding: var(--aif-sp-3) var(--aif-sp-6);
	font: inherit;
	font-size: var(--aif-fs-md);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	background: var(--aif-color-primary);
	border: 1px solid var(--aif-color-primary);
	border-radius: var(--aif-radius-md);
	box-shadow: var(--aif-shadow-sm);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	min-height: 44px;
}
.button_go_on:hover,
.btn:hover,
.aif-btn:hover {
	background: var(--aif-color-primary-hover);
	border-color: var(--aif-color-primary-hover);
	color: #fff;
	text-decoration: none;
	box-shadow: var(--aif-shadow-md);
}
.button_go_on:active,
.btn:active,
.aif-btn:active {
	background: var(--aif-color-primary-active);
	transform: translateY(1px);
}
.button_go_on:focus-visible,
.btn:focus-visible,
.aif-btn:focus-visible { outline: 0; box-shadow: var(--aif-shadow-focus); }
.button_go_on:disabled,
.btn:disabled,
.aif-btn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

/* Bottone full-width in form */
.button_go_on[type="submit"],
.aif-btn--block { width: 100%; }

/* Varianti */
.aif-btn--ghost {
	background: transparent;
	color: var(--aif-color-primary);
	border: 1px solid var(--aif-color-border);
}
.aif-btn--ghost:hover {
	background: var(--aif-color-primary-soft);
	color: var(--aif-color-primary);
	border-color: var(--aif-color-primary);
}
.aif-btn--danger {
	background: var(--aif-color-error);
	border-color: var(--aif-color-error);
}
.aif-btn--danger:hover {
	background: #991717;
	border-color: #991717;
}
.aif-btn--sm {
	padding: var(--aif-sp-2) var(--aif-sp-3);
	font-size: var(--aif-fs-sm);
	min-height: 36px;
}
.aif-btn--disabled,
.aif-cta.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ============================================================================
 * 10. Floating notification (legacy haccp) — modernizzato come toast
 * ========================================================================== */
.floatingNotification {
	display: inline-block;
	margin: var(--aif-sp-4) auto;
	padding: var(--aif-sp-3) var(--aif-sp-5);
	border-radius: var(--aif-radius-md);
	box-shadow: var(--aif-shadow-md);
	color: #fff !important;
	font-size: var(--aif-fs-sm);
	font-weight: 500;
	max-width: 480px;
	background: var(--aif-color-error) !important;
	animation: aifFadeIn 0.2s ease;
}
.floatingNotification[style*="009900"] { background: var(--aif-color-success) !important; }
.floatingNotification[style*="FF0000"] { background: var(--aif-color-error) !important; }
.floatingNotification h4 {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	color: inherit !important;
}
@keyframes aifFadeIn {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
 * 11. Dashboard corsista (.aif-card / .aif-cta / .tag) — già usati in dashboard.php
 * ========================================================================== */
.aif-wrap {
	max-width: var(--aif-container-narrow);
	margin: var(--aif-sp-8) auto;
	padding: 0 var(--aif-sp-6);
}
.aif-nav {
	display: flex;
	gap: var(--aif-sp-4);
	font-size: var(--aif-fs-sm);
	color: var(--aif-color-text-muted);
	margin-bottom: var(--aif-sp-6);
}
.aif-nav a {
	color: var(--aif-color-text-muted);
	font-weight: 500;
	padding: var(--aif-sp-1) var(--aif-sp-2);
	border-radius: var(--aif-radius-sm);
}
.aif-nav a:hover { background: var(--aif-color-primary-soft); color: var(--aif-color-primary); text-decoration: none; }

.aif-course-name {
	font-size: var(--aif-fs-lg) !important;
	font-weight: 700 !important;
	color: var(--aif-color-primary) !important;
	margin: 0 0 var(--aif-sp-2) !important;
	text-transform: none;
}
.aif-meta {
	color: var(--aif-color-text-muted) !important;
	font-size: var(--aif-fs-sm) !important;
	margin: var(--aif-sp-1) 0 !important;
}
.aif-pct {
	display: block !important;
	height: 8px !important;
	background: var(--aif-color-surface-alt) !important;
	border: 1px solid var(--aif-color-border);
	border-radius: var(--aif-radius-full) !important;
	margin: var(--aif-sp-3) 0 !important;
	overflow: hidden;
}
.aif-pct > div {
	height: 100% !important;
	background: var(--aif-color-primary) !important;
	border-radius: var(--aif-radius-full) !important;
	transition: width 0.3s ease;
}
.aif-cta {
	display: inline-flex !important;
	align-items: center;
	gap: var(--aif-sp-2);
	margin-top: var(--aif-sp-3) !important;
	padding: var(--aif-sp-3) var(--aif-sp-6) !important;
	background: var(--aif-color-primary) !important;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: var(--aif-radius-md) !important;
	font-weight: 600;
	min-height: 40px;
	transition: background 0.15s ease;
}
.aif-cta:hover { background: var(--aif-color-primary-hover) !important; }
.aif-cta.disabled { background: var(--aif-color-border-strong) !important; color: var(--aif-color-text-muted) !important; }

.tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	background: var(--aif-color-primary-soft) !important;
	color: var(--aif-color-primary) !important;
	font-size: var(--aif-fs-xs) !important;
	font-weight: 600;
	border-radius: var(--aif-radius-full) !important;
	margin-right: var(--aif-sp-2);
	letter-spacing: 0.02em;
}
.tag.warn { background: var(--aif-color-warning-soft) !important; color: var(--aif-color-warning) !important; }
.tag.ok   { background: var(--aif-color-info-soft) !important; color: var(--aif-color-info) !important; }

/* ============================================================================
 * 12. Player corso (dashboard-course.php)
 * ========================================================================== */
#courseContainer,
#courseCompletedContainer {
	background: var(--aif-color-surface);
	border: 1px solid var(--aif-color-border);
	border-radius: var(--aif-radius-lg);
	padding: var(--aif-sp-8) !important;
	box-shadow: var(--aif-shadow-md);
	max-width: 880px;
	margin: var(--aif-sp-6) auto;
	text-align: left;
}
#courseNameLabel,
#courseNameLabel_completed {
	font-size: var(--aif-fs-2xl);
	font-weight: 800;
	color: var(--aif-color-primary) !important;
	margin: 0 0 var(--aif-sp-4);
}

#currentLessonContainer {
	background: transparent;
	margin: var(--aif-sp-4) 0;
}
#currentLessonContainer video {
	display: block;
	width: 100%;
	border-radius: var(--aif-radius-md);
	background: #0F172A;
	box-shadow: var(--aif-shadow-md);
}
#currentLessonContainer > span,
#currentLessonContainer > br + span {
	display: block;
	color: var(--aif-color-text-muted);
	font-size: var(--aif-fs-sm);
	margin: var(--aif-sp-2) 0;
}

#progressInformationContainer {
	border: 0 !important;
	border-top: 1px solid var(--aif-color-border) !important;
	border-bottom: 1px solid var(--aif-color-border) !important;
	padding: var(--aif-sp-4) 0;
	margin-top: var(--aif-sp-6) !important;
}
#progressInformationContainer h3 {
	font-size: var(--aif-fs-md);
	color: var(--aif-color-text) !important;
	font-weight: 600;
	margin: var(--aif-sp-2) 0;
}

#totalLessonsContainer {
	margin-top: var(--aif-sp-4);
}
#totalLessonsContainer > .div_section_80pct {
	background: var(--aif-color-surface-alt) !important;
	border: 1px solid var(--aif-color-border);
	border-radius: var(--aif-radius-md) !important;
	margin: var(--aif-sp-2) 0;
	padding: 0;
	width: 100%;
}
#totalLessonsContainer > .div_section_80pct h3 {
	margin: 0;
	padding: var(--aif-sp-3) var(--aif-sp-4) !important;
	font-size: var(--aif-fs-md) !important;
	font-weight: 600;
	color: var(--aif-color-text) !important;
}
#totalLessonsContainer > .div_section_80pct h3:hover {
	background: var(--aif-color-primary-soft);
	border-radius: var(--aif-radius-md);
}
#totalLessonsContainer > .div_section_80pct h3 .fa-check-circle { color: var(--aif-color-success); }
#totalLessonsContainer > .div_section_80pct h3 .fa-spinner       { color: var(--aif-color-text-placeholder); }

#itinererContainer,
#examContainer {
	background: var(--aif-color-warning-soft) !important;
	border: 1px solid var(--aif-color-warning) !important;
	border-radius: var(--aif-radius-md) !important;
	padding: var(--aif-sp-5) !important;
	margin: var(--aif-sp-4) 0 !important;
}
#itinererContainer h3,
#examContainer h3 {
	color: var(--aif-color-warning) !important;
	font-size: var(--aif-fs-lg);
}

#openTestButton,
#openExamButton {
	display: inline-flex;
	margin-top: var(--aif-sp-3);
	background: var(--aif-color-warning) !important;
	border-color: var(--aif-color-warning) !important;
}
#openTestButton:hover,
#openExamButton:hover {
	background: #9A4308 !important;
	border-color: #9A4308 !important;
}

/* Countdown */
.timer {
	display: flex;
	justify-content: center;
	gap: var(--aif-sp-3);
	margin: var(--aif-sp-3) 0;
	width: 100% !important;
}
.timer .timer-wrapper {
	background: var(--aif-color-primary);
	color: #fff;
	border-radius: var(--aif-radius-md);
	padding: var(--aif-sp-3) var(--aif-sp-4);
	text-align: center;
	min-width: 64px;
	box-shadow: var(--aif-shadow-sm);
}
.timer .time {
	font-size: var(--aif-fs-xl);
	font-weight: 700;
	line-height: 1;
}
.timer .text {
	font-size: var(--aif-fs-xs);
	opacity: 0.85;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Modal container (quiz + ripasso) */
.modal_container {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	display: none;
	z-index: 100;
	overflow-y: auto;
	padding: var(--aif-sp-6) var(--aif-sp-4);
}
.modal_container .modal {
	background: var(--aif-color-surface);
	border-radius: var(--aif-radius-lg);
	padding: var(--aif-sp-8);
	max-width: 640px;
	margin: var(--aif-sp-12) auto;
	box-shadow: var(--aif-shadow-lg);
	animation: aifFadeInModal 0.2s ease;
}
@keyframes aifFadeInModal {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
 * 13. Quiz (dynamic-quiz override AIFEC)
 * ========================================================================== */
.quiz-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--aif-sp-3) var(--aif-sp-6);
	background: var(--aif-color-primary);
	color: #fff !important;
	border-radius: var(--aif-radius-md);
	font-weight: 600;
	text-decoration: none;
	margin: var(--aif-sp-2);
	transition: background 0.15s ease;
}
.quiz-button:hover { background: var(--aif-color-primary-hover); text-decoration: none; color: #fff; }

/* ============================================================================
 * 14. Footer
 * ========================================================================== */
.site-footer,
.aif-footer {
	background: var(--aif-color-surface);
	border-top: 1px solid var(--aif-color-border);
	margin-top: var(--aif-sp-12);
	padding: var(--aif-sp-8) 0;
}
.site-footer .container,
.site-footer .row,
.aif-footer__inner {
	max-width: var(--aif-container-max);
	margin: 0 auto;
	padding: 0 var(--aif-sp-6);
}
.site-footer p { text-align: center; color: var(--aif-color-text-muted); margin: 0; font-size: var(--aif-fs-sm); }
.site-footer .logo_link { font-weight: 800; color: var(--aif-color-primary); }

/* ============================================================================
 * 15. Landing (staging/index.php) — card grid
 * ========================================================================== */
.aifec-landing-hero {
	text-align: center;
	margin: var(--aif-sp-8) auto var(--aif-sp-10);
}
.aifec-landing-hero h1 {
	font-size: var(--aif-fs-4xl);
	letter-spacing: -0.03em;
	color: var(--aif-color-primary);
}
.aifec-landing-hero .lead {
	font-size: var(--aif-fs-lg);
	color: var(--aif-color-text-muted);
}
.env-tag {
	display: inline-block;
	margin-top: var(--aif-sp-2);
	padding: 4px 12px;
	background: var(--aif-color-accent-soft);
	color: var(--aif-color-accent);
	font-weight: 600;
	font-size: var(--aif-fs-xs);
	border-radius: var(--aif-radius-full);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.aifec-card-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--aif-sp-6);
	max-width: 880px;
	margin: 0 auto;
}
.aifec-card-row--landing {
	grid-template-columns: repeat(3, 1fr);
	max-width: var(--aif-container-max);
	gap: var(--aif-sp-5);
}
@media (max-width: 960px) {
	.aifec-card-row--landing { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 720px) {
	.aifec-card-row { grid-template-columns: 1fr; }
}

/* Logo istituzionale sopra il footer (landing area corsi) */
.aifec-landing-brand {
	text-align: center;
	padding: var(--aif-sp-10) var(--aif-sp-6) var(--aif-sp-4);
	max-width: var(--aif-container-max);
	margin: 0 auto;
}
.aifec-landing-brand__logo {
	max-width: min(100%, 300px);
	width: 100%;
	height: auto;
	display: inline-block;
	vertical-align: middle;
	object-fit: contain;
}

/* Transizione “flow” in uscita (fallback senza View Transitions API) */
body.aifec-landing {
	transition: opacity 0.28s ease, transform 0.32s ease, filter 0.32s ease;
}
body.aifec-landing.aifec-exit-flow {
	opacity: 0;
	transform: translateY(10px) scale(0.992);
	filter: blur(3px);
	pointer-events: none;
}

@supports (view-transition-name: none) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0.42s;
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	}
	::view-transition-old(root) {
		animation-name: aifec-vt-out;
	}
	::view-transition-new(root) {
		animation-name: aifec-vt-in;
	}
}
@keyframes aifec-vt-out {
	from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
	to { opacity: 0.2; transform: translateY(-14px) scale(0.985); filter: blur(6px); }
}
@keyframes aifec-vt-in {
	from { opacity: 0.25; transform: translateY(18px) scale(0.99); filter: blur(5px); }
	to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.aifec-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--aif-color-surface);
	border: 1px solid var(--aif-color-border);
	border-radius: var(--aif-radius-xl);
	padding: var(--aif-sp-8);
	color: var(--aif-color-text);
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	box-shadow: var(--aif-shadow-sm);
	min-height: 240px;
}
.aifec-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--aif-shadow-lg);
	border-color: var(--aif-color-primary);
	text-decoration: none;
	color: var(--aif-color-text);
}
.aifec-card .icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--aif-radius-full);
	background: var(--aif-color-primary-soft);
	color: var(--aif-color-primary);
	font-size: var(--aif-fs-2xl);
	margin-bottom: var(--aif-sp-4);
}
.aifec-card h2 {
	color: var(--aif-color-text);
	font-size: var(--aif-fs-xl);
	margin-bottom: var(--aif-sp-3);
}
.aifec-card p {
	color: var(--aif-color-text-muted);
	font-size: var(--aif-fs-sm);
	margin-bottom: var(--aif-sp-6);
}
.aifec-card .cta {
	color: var(--aif-color-primary);
	font-weight: 600;
	font-size: var(--aif-fs-sm);
	display: inline-flex;
	align-items: center;
	gap: var(--aif-sp-2);
}
.aifec-card .cta::after { content: '→'; transition: transform 0.18s ease; }
.aifec-card:hover .cta::after { transform: translateX(4px); }

/* Card corso (dashboard corsista) — stessa famiglia delle card landing / ACP */
.aifec-card--course {
	text-align: left;
	min-height: 280px;
	align-items: stretch;
}
.aifec-card--course > div:first-child {
	flex: 1 1 auto;
	min-width: 0;
}
.aifec-card--course h2 {
	font-size: var(--aif-fs-lg);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}
.aifec-card--course .aifec-course-card-desc {
	margin-bottom: var(--aif-sp-3);
	line-height: 1.5;
}
.aifec-card--course .aifec-course-card-progress-wrap {
	margin: var(--aif-sp-2) 0 var(--aif-sp-1);
}
.aifec-card--course .aifec-course-card-pct-line {
	margin: 0 0 var(--aif-sp-3);
	font-size: var(--aif-fs-sm);
	color: var(--aif-color-text-muted);
}
.aifec-card--course .aifec-course-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aif-sp-2);
	margin-top: var(--aif-sp-2);
}
.aifec-card--course .aif-pct {
	margin: 0;
}
.aifec-card--course .cta {
	margin-top: var(--aif-sp-2);
}
/* Stato non cliccabile (come card "Attestati" in ACP) */
.aifec-card--disabled,
.aifec-card--disabled:hover {
	opacity: 0.62;
	cursor: default;
	transform: none;
	box-shadow: var(--aif-shadow-sm);
	border-color: var(--aif-color-border);
	color: var(--aif-color-text);
	text-decoration: none;
	pointer-events: none;
}
.aifec-card--disabled .cta {
	color: var(--aif-color-text-muted);
}
.aifec-card--disabled .cta::after {
	display: none;
}

.aifec-secondary {
	margin-top: var(--aif-sp-8);
	text-align: center;
	color: var(--aif-color-text-muted);
	font-size: var(--aif-fs-sm);
}

/* ============================================================================
 * 16. ACP dashboard (back-office)
 * ========================================================================== */
.aif-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--aif-color-surface);
	border: 1px solid var(--aif-color-border);
	border-radius: var(--aif-radius-md);
	overflow: hidden;
	font-size: var(--aif-fs-sm);
}
.aif-table th, .aif-table td {
	padding: var(--aif-sp-3) var(--aif-sp-4);
	text-align: left;
	border-bottom: 1px solid var(--aif-color-border);
	vertical-align: middle;
}
.aif-table th {
	background: var(--aif-color-surface-alt);
	font-weight: 600;
	color: var(--aif-color-text-muted);
	font-size: var(--aif-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.aif-table tr:last-child td { border-bottom: 0; }
.aif-table tr:hover td { background: var(--aif-color-surface-alt); }

.muted { color: var(--aif-color-text-muted); }

/* ============================================================================
 * 17. Stato pagina (vuoto / errore)
 * ========================================================================== */
.aif-empty {
	text-align: center;
	color: var(--aif-color-text-muted);
	padding: var(--aif-sp-12) var(--aif-sp-6);
	background: var(--aif-color-surface);
	border: 1px dashed var(--aif-color-border);
	border-radius: var(--aif-radius-lg);
}

/* ============================================================================
 * 18. Responsive
 * ========================================================================== */
@media (max-width: 720px) {
	h1 { font-size: var(--aif-fs-2xl); }
	h2 { font-size: var(--aif-fs-xl); }
	.site-header .header_area_corsi_login,
	.aif-header__inner { padding: var(--aif-sp-3) var(--aif-sp-4); }
	.section_80pct, .section_90pct, .aif-wrap { padding: 0 var(--aif-sp-4); }
	#courseContainer, #courseCompletedContainer { padding: var(--aif-sp-5) !important; }
}