/* ==========================
   CONTENITORE
========================== */

.ellepi-course-calendar-wrapper{
    margin:30px 0;
    padding:24px;
    background:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.ellepi-course-calendar-title{
    margin:0 0 25px;
    font-size:24px;
    font-weight:700;
}

/* ==========================
   HEADER
========================== */

.ellepi-calendar-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}

.ellepi-calendar-month-title{
    font-size:22px;
    font-weight:700;
}

.ellepi-calendar-navigation{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#f5f5f5;
    cursor:pointer;
    transition:.25s;
    font-size:18px;
}

.ellepi-calendar-navigation:hover{
    background:#111;
    color:#fff;
}

.ellepi-calendar-navigation:disabled{
    opacity:.3;
    cursor:default;
}

/* ==========================
   GIORNI SETTIMANA
========================== */

.ellepi-calendar-weekdays{
    display:grid;
    grid-template-columns:repeat(7, 46px);
    justify-content:center;
    gap:6px;
    margin-bottom:12px;
}

.ellepi-calendar-weekdays span{
    text-align:center;
    font-weight:600;
    color:#777;
    padding:10px 0;
}

/* ==========================
   CALENDARIO
========================== */

.ellepi-calendar-grid{
     display:grid;
    grid-template-columns:repeat(7, 46px);
    justify-content:center;
    gap:6px;
}

.ellepi-calendar-empty{
    aspect-ratio:1;
}

/* ==========================
   GIORNI
========================== */

.ellepi-calendar-day{

    width:46px;
    height:46px;

    border:1px solid #ececec;
    border-radius:10px;

    background:#fafafa;

    font-size:14px;
    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.ellepi-calendar-day:hover{

    transform:translateY(-2px);

    box-shadow:0 6px 18px rgba(0,0,0,.08);

}

.ellepi-calendar-day:disabled{

    opacity:.85;

    cursor:not-allowed;

}

/* ==========================
   COLORI
========================== */

.ellepi-calendar-day.available{

    border-color:#32b44a;

}

.ellepi-calendar-day.available::after{

    content:"";

    width:9px;

    height:9px;

    background:#32b44a;

    border-radius:50%;

    position:absolute;

    bottom:8px;

    left:50%;

    transform:translateX(-50%);

}

.ellepi-calendar-day.limited{

    border-color:#ff9800;

}

.ellepi-calendar-day.limited::after{

    content:"";

    width:9px;

    height:9px;

    background:#ff9800;

    border-radius:50%;

    position:absolute;

    bottom:8px;

    left:50%;

    transform:translateX(-50%);

}

.ellepi-calendar-day.full{

    border-color:#ef4444;

}

.ellepi-calendar-day.full::after{

    content:"";

    width:9px;

    height:9px;

    background:#ef4444;

    border-radius:50%;

    position:absolute;

    bottom:8px;

    left:50%;

    transform:translateX(-50%);

}

/* ==========================
   GIORNO SELEZIONATO
========================== */

.ellepi-calendar-day.selected{

    background:#111;

    color:#fff;

    border-color:#111;

}

/* ==========================
   LEGENDA
========================== */

.ellepi-calendar-legend{

    display:flex;

    gap:25px;

    margin-top:25px;

    margin-bottom:30px;

    flex-wrap:wrap;

}

.ellepi-calendar-legend span{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

}

.ellepi-legend-dot{

    width:10px;

    height:10px;

    border-radius:50%;

}

.ellepi-legend-available{

    background:#32b44a;

}

.ellepi-legend-limited{

    background:#ff9800;

}

.ellepi-legend-full{

    background:#ef4444;

}

/* ==========================
   SESSIONI
========================== */

.ellepi-course-selected-day{

    margin-top:25px;

}

.ellepi-selected-day-title{

    margin-bottom:18px;

    font-size:20px;

}

.ellepi-course-slots{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.ellepi-slot{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px;

    border:2px solid #e8e8e8;

    cursor:pointer;

    transition:.25s;

}

.ellepi-slot:hover{

    border-color:var(--main-color);

    transform:translateY(-2px);

}

.ellepi-slot input{

    transform:scale(1.25);

}

.ellepi-slot-content{

    display:flex;

    flex-direction:column;

}

.ellepi-slot-time{

    font-size:18px;

    font-weight:700;

}

.ellepi-slot-places{

    color:#666;

    margin-top:4px;

}

.ellepi-slot.disabled{

    opacity:.45;

    cursor:not-allowed;

}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

    .ellepi-course-calendar-wrapper{

        padding:18px;

    }

    .ellepi-calendar-grid{

        gap:6px;

    }

    .ellepi-calendar-day{

        font-size:14px;

    }

    .ellepi-calendar-month-title{

        font-size:18px;

    }

    .ellepi-slot{

        padding:14px;

    }

}