.calendar-container{
    width:100%;
    background: #ffffff;
    border-radius:10px;
    padding:15px;
    border:1px solid #e0e0e0;
}
/*HEADER*/
.calendar-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}
.calendar-header h5{
    font-weight:700;
    color: #2e7d32;
    margin:0;
}
.cal-btn{
    background: #2e7d32;
    color: #fff;
    border:none;
    padding:5px 12px;
    border-radius:5px;
    font-weight:bold;
}
/*DAYS HEADER*/
.calendar-days{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    text-align:center;
    font-weight:600;
    background: #2e7d32;
    color: #fff;
    border:1px solid #e0e0e0;
    border-bottom:none;
}
.calendar-days div{
    padding:12px 0;
    border-right:1px solid #ffffff33;
}
.calendar-days div:last-child{
    border-right:none;
}
/*CALENDAR GRID */
.calendar-dates{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    grid-auto-rows:85px;
}
/* CALENDAR CELL */
.calendar-date{
    border:1px solid #e0e0e0;
    position:relative;
    cursor:pointer;
    background: #ffffff;
    transition:0.2s;
}
/* DATE NUMBER */
.date-number{
    position:absolute;
    top:6px;
    left:8px;
    font-size:14px;
    font-weight:600;
}
/* SLOT TEXT */
.slot-count{
    position:absolute;
    bottom:6px;
    right:6px;
    font-size:11px;
    font-weight:600;
    color:#1b5e20;
}
/* COLORS */
.calendar-date.available:hover{
    background: #c8e6c9;
    transform:scale(1.03);
}
.calendar-date.available{
    background: #e8f5e9;
}
.calendar-date.full{
    background: #eeeeee;
    color: #888;
}
.calendar-date.holiday{
    background: #ffcdd2;
    color: #b71c1c;
}
.calendar-date.disabled{
    background: #f5f5f5;
    color: #bbb;
    pointer-events:none;
}
.calendar-date.selected{
    background: #2e7d32;
    color: #fff;
    transform:scale(1.05);
    z-index:2;
}
/* LEGEND */
.calendar-legend{
    margin-top:15px;
    text-align:center;
    font-size:13px;
}
.legend-box{
    display:inline-block;
    width:15px;
    height:15px;
    margin-right:5px;
}
.legend-available{ background: #2e7d32; }
.legend-full{ background: #9e9e9e; }
.legend-holiday{ background: #c62828; }
/* SESSION BOX (SMALLER) */
.schedule-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin-top:20px;
}
.schedule-box{
    border:1px solid #dee2e6;
    border-radius:10px;
    padding:18px;
    text-align:center;
    cursor:pointer;
    background: #f8f9fa;
    transition:0.2s;
    box-shadow:0 2px 5px rgba(0,0,0,0.05);
}
.schedule-box:hover{
    border:1px solid #2e7d32;
    background: #e8f5e9;
    transform:translateY(-2px);
}
.schedule-box.active-session{
    border:2px solid #2e7d32;
    background: #e8f5e9;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
}
.schedule-box.full{
    background: #eeeeee;
    color: #999;
    pointer-events:none;
}
.slot{
    font-weight:600;
    color: #2e7d32;
    display:block;
    margin-top:5px;
}
/*WALK-IN BOX */
.walkin-box{
    border:1px dashed #2e7d32;
    padding:10px;
    border-radius:6px;
    margin-top:12px;
    background: #f1f8f4;
    
}
/* MOBILE */
@media (max-width:768px){
    .calendar-container{
        padding:10px;
    }
    .calendar-days div{
        font-size:11px;
        padding:6px 0;
    }
    .calendar-date{
        height:55px;
    }
    .date-number{
        font-size:12px;
        top:4px;
        left:6px;
    }
    .slot-count{
        font-size:9px;
        bottom:3px;
        right:4px;
    }
    .schedule-wrapper{
        grid-template-columns:1fr;
    }
    .schedule-box{
        padding:10px;
        font-size:13px;
    }
    .form-box{
        padding:15px;
    }
    .modal-dialog{
        margin:10px;
    }
}
@media (max-width: 480px){
    .calendar-date{
        height:50px;
    }
    .slot-count{
        font-size:8px;
    }
    .date-number{
        font-size:11px;
    }
}
.calendar-date.available{
    background: #e8f5e9;
}
.calendar-date.full{
    background: #eeeeee;
    color: #999;
}
.calendar-date.holiday{
    background: #ffcdd2;
    color: #b71c1c;
}
.calendar-date.disabled{
    background: #f5f5f5;
    color: #bbb;
    pointer-events: none;
}
.disabled-session{
    background: #eee !important;
    border:2px solid #ccc !important;
    color: #999;
    pointer-events:none;
}