@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root{
	--font: 'Figtree', -apple-system, sans-serif;
	--blue: #0090FF;
    --blue-1: #F0F8FF;
    --blue-2: #DDEFFF;
    --blue-3: #B8DFFF;
    --blue-4: #7CC8FF;
    --blue-5: #40B1FF;
    --blue-6: #0090FF;
    --blue-7: #007AD9;
    --blue-8: #0064B3;
    --blue-9: #004E8C;
	--ime-border: rgba(0, 0, 0, 0.08);
	--ime-radius: 18px;
	--ime-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); 
	--ime-muted: rgba(17, 24, 39, 0.65);
	--ime-text: #111827;
	/* Colori livello (solidi) */
	--ime-level-a: #1e88e5; /* Fluency 1 */
	--ime-level-b: #43a047; /* Fluency 2 */
	--ime-level-c: #f9a825; /* Fluency 3 */
	--ime-level-d: #e53935; /* Fluency 4 */
	--ime-level-e: #6a1b9a; /* Fluency 5 */
	
	/* RGB per ombre/alpha (spaziati: r g b) */
	--ime-level-a-rgb: 30 136 229;
	--ime-level-b-rgb: 67 160 71;
	--ime-level-c-rgb: 249 168 37;
	--ime-level-d-rgb: 229 57 53;
	--ime-level-e-rgb: 106 27 154;
	
	/* RGBA 50% */
	--ime-level-a-rgba: rgb(30 136 229 / 50%);
	--ime-level-b-rgba: rgb(67 160 71 / 50%);
	--ime-level-c-rgba: rgb(249 168 37 / 50%);
	--ime-level-d-rgba: rgb(229 57 53 / 50%);
	--ime-level-e-rgba: rgb(106 27 154 / 50%);
	
	
	/* RGBA light*/
	--ime-level-a-rgba-light: rgb(30 136 229 / 10%);
	--ime-level-b-rgba-light: rgb(67 160 71 / 10%);
	--ime-level-c-rgba-light: rgb(249 168 37 / 10%);
	--ime-level-d-rgba-light: rgb(229 57 53 / 10%);
	--ime-level-e-rgba-light: rgb(106 27 154 / 10%);
	
	/* Brand (bottoni Continue/Review) */
	--ime-brand: #ed2468;
	--ime-brand-rgb: 237 36 104;
}

/******* pagina wp **********/

.entry-header {
    margin-bottom: 2.1875rem;
    display: none;
}

.bb-buddypanel.sticky-header .site-content {
	padding-top:0 !important;
}

/* === IME Course IN PROGRESS === */


.ld-in-progress-wrapper {
    display: flex;
	flex-wrap: wrap;
	/*     gap: 24px; */
    margin-top: 20px;
    background-color: #f3f3f3;
    padding: 20px;
    border-radius: 10px;
	justify-content: center;
}
.ld-in-progress-wrapper.cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ld-in-progress-wrapper.cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ld-in-progress-wrapper.cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media(max-width:768px){
	.ld-in-progress-wrapper { grid-template-columns: 1fr !important; }
}

/* === IME Course ALL COURSES === */
.ld-all-courses-wrapper {
    display: flex;
	flex-wrap: wrap;
	gap: 10px; 
    margin-top: 0px;
	font-family: "Figtree", sans-serif;
    padding: 20px;
    border-radius: 10px;
    /* align-items: center; */
    /* justify-content: center; */
	
}
.ld-all-courses-wrapper.cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ld-all-courses-wrapper.cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ld-all-courses-wrapper.cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media(max-width:768px){
	.ld-all-courses-wrapper { grid-template-columns: 1fr !important; }
}





.ld-course-card article{
	display: flex;
    flex-direction: column;
    border: 1px solid var(--ime-border);
    border-radius: var(--ime-radius);
    background-color: #fff; 
    position: relative;
    box-shadow: var(--ime-shadow);
    padding: 18px;
    /* border-radius: 21px; */ 
    /* overflow: hidden; */
    /* box-shadow: 0 2px 10px rgb(0 0 0 / 26%); */
    transition: transform .2s ease, box-shadow .2s ease;
}
/*
	.ld-course-card.main_course.is-completed {
    background:var(--ime-brand) !important;
	}
*/
.ld-course-card.main_course.is-completed article {
	position: relative; /* necessario per posizionare l’overlay */
	background-color: #fff;
	
}

/* Overlay semitrasparente */
.ld-course-card.main_course.is-completed article::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	/*background: rgba(0, 0, 0, 0.45);*/
	pointer-events: none;
	clip-path: inset(0 round 18px); /* adatta i bordi se hai radius */
}

/*overlay anche al badge se è completed*/
.ld-course-card.main_course.is-completed article::before {
    content: "⭐ Main Course";
    position: absolute;
    top: -15px;
    left: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0 8px;
    border-radius: 6px;
    color: #fff;
    z-index: 20;
    letter-spacing: 0.3px;
    /*background: rgba(0, 0, 0, 0.5) !important;*/
    /*filter: grayscale(0.8) brightness(0.7);*/
}




/* Base badge “Main Course” */
.ld-course-card.main_course article::before {
    content: "⭐ Main Course";
    position: absolute;
    top: -15px;
    left: 5px;
    font-size: 14px;
    font-weight: 600;
    padding: 0px 8px;
    border-radius: 6px;
    color: #fff;
    letter-spacing: 0.3px;
}


/* Base badge “Recommended” */
.ld-course-card.is-recommended article::before {
    content: "Recommended";
    position: absolute;
    top: -15px;
    left: 5px;
    font-size: 14px;
    font-weight: 600;
    padding: 0px 8px;
    border-radius: 6px;
    color: #fff;
    letter-spacing: 0.3px;
}


/*coloro per livello*/

/* === Per livello (colori coordinati) === */

.ld-course-card.main_course {
	width:30%;
    align-self: flex-start;
    margin-right: auto;
	margin-top:20px;
}

/* A */
.ld-course-card.level-a.main_course article::before { background: var(--ime-level-a); }

/* B */

.ld-course-card.level-b.main_course article::before { background: var(--ime-level-b); }

/* C */

.ld-course-card.level-c.main_course article::before { background: var(--ime-level-c); }

/* D */

.ld-course-card.level-d.main_course article::before { background: var(--ime-level-d); }

/* E */

.ld-course-card.level-e.main_course article::before { background: var(--ime-level-e); }




.ld-course-card article:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.ld-course-thumb-wrap {
	display: block;
	aspect-ratio: 16/9;
	overflow: hidden;
}

.ld-course-thumb-wrap img {
	border-radius: 5px;
}
.ld-course-thumb {
	width: 330px;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ld-course-thumb.placeholder {
	background: #f2f2f2;
	width: 100%;
	height: 100%;
}
.ld-course-content {
	padding: 16px;
}
.ld-course-title {
	font-size: 1.05rem;
	margin: 0 0 10px;
	min-height: 68px;
	line-height: 1.3;
}
.ld-course-title a {
    text-decoration: none;
    color: #111827;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.02em !important;
    font-family: "Figtree", sans-serif !important;
}
.ld-course-title a:hover {
	transition: .5s;
	text-decoration: underline;
	color: var(--ime-brand);
}
.ld-progress {
	margin: 10px 0;
}
.ld-progress-text {
    /* margin: 10px 0 0; */
    font-size: 13px;
    color: var(--ime-muted);
    font-weight: 400;
}
.ld-progress-percent {
    color: var(--ime-text);
    font-weight: 800;
    font-size: 13px;
}
.ld-progress-bar {
	width: 100%;
    height: 5px !important;
	
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08) !important;
    position: relative;
    overflow: hidden;
}
.ld-progress-fill {
    display: block;
    height: 100%;
	
    background: #0090FF;
    border-radius: 999px;
    transition: width 0.4s ease;
}
.ld-progress-meta {
	margin-top: 6px;
	
	
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
.ld-progress-count { 
    margin-left: 8px;
    font-weight: 600;
    color: var(--ime-muted);
    font-size: 13px;
}

.ld-last-activity {
	margin-top: 8px;
	font-size: .9rem;
	opacity: .9;
	display: flex;
	flex-direction: column;
}
.ld-last-activity span:first-child{
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700;
}
.ld-last-activity span:nth-child(2) {
	margin-top: -10px;
	font-size: 13px;
}

.ld-continue {
	margin-top: 12px;
}
.ld-continue-btn {
	font-family: var(--font);
    background: transparent;
    color: var(--blue);
    font-weight: 600;
    border: 1.5px solid var(--blue-4);
    padding: 12px 28px;
    font-size: 15px;
    border-radius: 6px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
}


@media (max-width: 1200px) {
	.ld-continue-btn {
		font-size: 7px;
		padding: 12px 0px;
	}
}


@media (max-width: 768px) {
	.ld-continue-btn {
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.ld-continue-btn {
		font-size: 12.5px;
	}
}

.ld-continue-btn:hover {
	background: var(--blue-1); 
	border-color: var(--blue); 
	transform: translateY(-1px); ;
}


.ld-continue-btn i {
	margin-left: 5px;
}


/* === Badge container (livello + recommended) === */
.ld-course-badges {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 10px 16px 0;
}

/* Badge livello */
.ld-level-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 5px;
	font-size: .8rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: #1d1d37; /* colore base */
	user-select: none;
	
}

.ld-level-container {
    border: 1px solid #E3E6E9;
    border-radius: 18px;
    box-shadow: var(--ime-shadow);
	margin: 40px 0;
}

/***  varianti colori ld-level-container **/

.ld-level-container.level-a {
	background: linear-gradient(135deg, var(--ime-level-a-rgba-light), rgba(255, 255, 255, 0));
}

.ld-level-container.level-b {
	background: linear-gradient(135deg, var(--ime-level-b-rgba-light), rgba(255, 255, 255, 0));
}

.ld-level-container.level-c {
	background: linear-gradient(135deg, var(--ime-level-c-rgba-light), rgba(255, 255, 255, 0));
}

.ld-level-container.level-d {
	background: linear-gradient(135deg, var(--ime-level-d-rgba-light), rgba(255, 255, 255, 0));
}


.ld-level-container.level-e {
	background: linear-gradient(135deg, var(--ime-level-e-rgba-light), rgba(255, 255, 255, 0));
}







.ld-level-header {
	
	padding: 20px;
	
	color: #fff;
	display: flex;
	align-items: center;
	gap: 100px;
	
}

.container-level-name {
    display: flex;
    flex-direction: row;
	gap:12px;
}

.ld-level-header h2 {
    font-family: var(--font) !important;
    margin: 0;
    font-weight: 700 !important;
    font-size: 28px;
    color: #1C3447 !important;
    text-transform: capitalize !important;
}

.number-level {
	font-size: 30px;
	font-weight: 700;
    font-family: var(--font);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    height: 60px;
    width: 60px;
    border-radius: 15px;
    /* padding: 20px; */
    align-items: center;
}

.fluency-tag {
    font-family: var(--font);
    text-transform: uppercase;
    font-weight: 600;
	font-size: 18px;
}

.level-a .number-level {background-color: var(--ime-level-a);}

.level-b .number-level {background-color: var(--ime-level-b);}

.level-c .number-level {background-color: var(--ime-level-c);}

.level-d .number-level {background-color: var(--ime-level-d);}

.level-e .number-level {background-color: var(--ime-level-e);}

.level-a .fluency-tag {color: var(--ime-level-a);}

.level-b .fluency-tag {color: var(--ime-level-b);}

.level-c .fluency-tag {color: var(--ime-level-c);}

.level-d .fluency-tag {color: var(--ime-level-d);}

.level-e .fluency-tag {color: var(--ime-level-e);}


/** header varianti
	
	.ld-level-header.level-a { 
	background: linear-gradient(90deg,var(--ime-level-a) 0%, #fff 100%);
	}
	
	.ld-level-header.level-b { 
	background: linear-gradient(90deg,var(--ime-level-b) 0%, #fff 100%);
	}
	
	.ld-level-header.level-c { 
	background: linear-gradient(90deg,var(--ime-level-c) 0%, #fff 100%);
	}
	
	.ld-level-header.level-d { 
	background: linear-gradient(90deg,var(--ime-level-d) 0%, #fff 100%);
	}
	
	.ld-level-header.level-e  { 
	background: linear-gradient(90deg,var(--ime-level-e) 0%, #fff 100%);
	}
	
**/

/*badge varianti*/

.ld-level-badge.level-a { background: var(--ime-level-a); }


.ld-level-badge.level-b { background: var(--ime-level-b); }


.ld-level-badge.level-c { background: var(--ime-level-c); }


.ld-level-badge.level-d { background: var(--ime-level-d); }


.ld-level-badge.level-e { background: var(--ime-level-e); }


/* Badge Recommended */
.ld-recommended-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 29px;
	font-size: .8rem;
	font-weight: 500;
	line-height: 1;
	
	background: transparent;
}

/* Varianti Badge Recommended colore per livello */

.ld-course-card.level-a.is-recommended .ld-recommended-badge { color: var(--ime-level-a); border: 1px solid var(--ime-level-a);}

.ld-course-card.level-b.is-recommended .ld-recommended-badge { color: var(--ime-level-b); border: 1px solid var(--ime-level-b);}

.ld-course-card.level-c.is-recommended .ld-recommended-badge { color: var(--ime-level-c); border: 1px solid var(--ime-level-c);}

.ld-course-card.level-d.is-recommended .ld-recommended-badge { color: var(--ime-level-d); border: 1px solid var(--ime-level-d);}

.ld-course-card.level-e.is-recommended .ld-recommended-badge { color: var(--ime-level-e); border: 1px solid var(--ime-level-e);}


/* === Completed label + Review button === */

.ld-completed-label {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 29px;
	font-size: .8rem;
	font-weight: 500;
	line-height: 1;
	background: var(--ime-brand);
	color: #fff;
	border: 1px solid var(--ime-brand);
	box-shadow: 0 4px 12px rgb(var(--ime-level-b-rgb) / 0.30);
}

.ld-review { margin-top: 12px; }

.ld-review-btn {
    font-family: var(--font);
    background: transparent;
    color: var(--blue);
    font-weight: 600;
    /*border: 1.5px solid var(--blue-4);*/
    padding: 12px 28px;
    font-size: 15px;
    border-radius: 6px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
}
.ld-review-btn:hover {
    /*background: var(--blue-1);
    border-color: var(--blue);*/
    transform: translateY(-1px);
	
}

.ld-course-card.is-recommended {
	
	width: 30%;
	
	margin-top:20px;
	border-radius:5px;
}


/* === Recommended Course Highlights (Dynamic by Level) === */

.ld-course-card.is-recommended article{
	position: relative;
	border-width: 0px;
	border-style: solid;
	transition: all 0.25s ease;
	background: #fff;
}



/* === Per livello (colori coordinati) === */

/* A */
.ld-course-card.level-a.is-recommended article{
background: #fff; /* fallback tenue (vedi opzione 3 per generarlo) */

/* 	box-shadow: 0 4px 12px rgb(var(--ime-level-a-rgb) / 0.30); */
}
.ld-course-card.level-a.is-recommended article::before { background: var(--ime-level-a); }

/* B */
.ld-course-card.level-b.is-recommended article{
background: #fff;
border-color: var(--ime-level-b);
/* 	box-shadow: 0 4px 12px rgb(var(--ime-level-b-rgb) / 0.30); */
}
.ld-course-card.level-b.is-recommended article::before { background: var(--ime-level-b); }

/* C */
.ld-course-card.level-c.is-recommended article{
background: #fff;
border-color: var(--ime-level-c);
/* 	box-shadow: 0 4px 12px rgb(var(--ime-level-c-rgb) / 0.30); */
}
.ld-course-card.level-c.is-recommended article::before { background: var(--ime-level-c); }

/* D */
.ld-course-card.level-d.is-recommended article{
background: #fff;
border-color: var(--ime-level-d);
/* 	box-shadow: 0 4px 12px rgb(var(--ime-level-d-rgb) / 0.30); */
}
.ld-course-card.level-d.is-recommended article::before { background: var(--ime-level-d); }

/* E */
.ld-course-card.level-e.is-recommended article{
background: #fff;
border-color: var(--ime-level-e);
/* 	box-shadow: 0 4px 12px rgb(var(--ime-level-e-rgb) / 0.30); */
}
.ld-course-card.level-e.is-recommended article::before { background: var(--ime-level-e); }








/* === LEVEL STEPS INDICATOR === */
/* Contenitore “pill” con bordo morbido e leggera ombra */
/* ==== Level Progress (10 tacche) ==== */
/* ==== Gauge / Tachimetro livello ==== */
.ld-level-gauge{

--thickness: 16px;
--needle-deg: 0deg;
position: relative;
width: 130px;
aspect-ratio: 2 / 1;
/* border-radius: 999px 999px 0 0; */
overflow: hidden; 
/* margin: 12px 0 8px; */
/* filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .08));*/
}

/* Semicerchio colorato a settori (verde -> giallo -> arancio -> rosso) */
/* Semicerchio a 5 settori */
.ld-level-gauge .gauge-arc {
position: absolute;
/* inset: auto 0 0 0; */
width: 100%;
height: 200%;
transform: rotate(18deg);
border-radius: 50%;
background: conic-gradient(from 180deg, 
#000000 0% 10%, 
#65d389 10% 20%, 
#37c874 20% 29%, /*inzio qui*/
transparent 29% 30%, /*gap furbo*/
#60d28d 30% 39%, 
transparent 39% 40%, /*gap furbo*/
#fdd63a 40% 49%, 
transparent 49% 50%, /*gap furbo*/
#ff9956 50% 59%, 
transparent 59% 60%, /*gap furbo*/
#d35f5f 60% 70%, 
#e35c5c 70% 80%, 
#e35c5c 80% 90%, 
#e35c5c 90% 100%
);

-webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--thickness)), #000 0);
mask: radial-gradient(closest-side, transparent calc(100% - var(--thickness)), #000 0);
}

/* Lancetta moderna */
.ld-level-gauge .gauge-needle{
position: absolute;
left: 50%;
bottom: 0;
top: 1px;
width: 2px;
height: calc(100% - 8px);
transform-origin: bottom center;
transform: rotate(var(--needle-deg));
background: linear-gradient(#111, #444);
box-shadow: 0 4px 10px rgba(0,0,0,.18);
}



/* Mozzo centrale con effetto vetro */
.ld-level-gauge .gauge-hub{
position: absolute;
left: 50%;
bottom: 5px;
transform: translate(-50%, 30%);
width: 33px;
height: 33px;
border-radius: 50%;
background: radial-gradient(closest-side, #fff 0 40%, #d9dde2cc 41% 60%, #bfc6cf00 61% 100%);
}

/* Puntino centrale nero */
.ld-level-gauge .gauge-hub::after{
content:"";
position:absolute;
inset:0;
margin:auto;
width:6px; 
height:6px;
background:#111;
border-radius:50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.08) inset;
}

/******barra progressione*****/

.ld-level-segbar {
    width: 35%;
    padding: 4px 0 6px;
}

.segbar-track {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
}

.segbar-segment {
    flex: 1;
    height: 15px;
    border-radius: 6px;
    transition: background 0.4s;
}

.segbar-labels {
    display: flex;
    gap: 5px;
}

.segbar-label {
    flex: 1;
    font-size: 10px;
    letter-spacing: 0.02em;
    line-height: 1.2;
    position: relative;
}

.segbar-label-underline {
    display: block;
    height: 2px;
    border-radius: 2px;
    margin-top: 2px;
}

@keyframes segbar-ripple {
    0%   { box-shadow: 0 0 0 0px var(--seg-color); }
    100% { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); }
}

.segbar-segment.segbar-current {
    animation: segbar-ripple 2s infinite;
}