/*=============================
    Weekly Calendar
=============================*/

.mc-calendar{

    width:100%;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:20px;

    margin-bottom:25px;

    box-sizing:border-box;

}

/*=============================
    Header
=============================*/

.mc-calendar-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:20px;

}

.mc-title{

    text-align:center;

}

.mc-title h4{

    margin:0;

    font-size:20px;

    font-weight:700;

    color:#222;

}

.mc-title span{

    display:block;

    color:#777;

    margin-top:5px;

}

.mc-nav{

    width:42px;

    height:42px;

    border:none;

    border-radius:10px;

    background:#f3f4f6;

    cursor:pointer;

    transition:.3s;

    font-size:18px;

}

.mc-nav:hover{

    background:#2563eb;

    color:#fff;

}

/*=============================
    Week
=============================*/

.mc-week-days{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:12px;

}

/*=============================
    Day Card
=============================*/

.mc-day{

    border:1px solid #e5e7eb;

    border-radius:14px;

    background:#fff;

    cursor:pointer;

    padding:15px 10px;

    transition:.25s;

    text-align:center;

    position:relative;

}

.mc-day:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(0,0,0,.08);

}

.mc-day-name{

    font-size:14px;

    color:#666;

}

.mc-day-number{

    font-size:28px;

    font-weight:bold;

    margin:10px 0;

    color:#222;

}

.mc-day-month{

    font-size:13px;

    color:#888;

}

.mc-day-status{

    margin-top:12px;

    font-size:12px;

    color:#2563eb;

}

/*=============================
    Active
=============================*/

.mc-day.active{

    background:#2563eb;

    border-color:#2563eb;

    color:#fff;

}

.mc-day.active .mc-day-name,

.mc-day.active .mc-day-number,

.mc-day.active .mc-day-month,

.mc-day.active .mc-day-status{

    color:#fff;

}

/*=============================
    Today
=============================*/

.mc-day.today{

    border:2px solid #22c55e;

}

.mc-day.today::before{

    content:"امروز";

    position:absolute;

    top:8px;

    left:8px;

    font-size:11px;

    background:#22c55e;

    color:#fff;

    padding:3px 7px;

    border-radius:20px;

}

/*=============================
    Disabled
=============================*/

.mc-day.disabled{

    opacity:.45;

    cursor:not-allowed;

    background:#f8fafc;

}

.mc-day.disabled:hover{

    transform:none;

    box-shadow:none;

}

/*=============================
    Slots
=============================*/

#mc-slots{

    margin-top:25px;

}

.mc-slot{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:90px;

    height:45px;

    margin:5px;

    border-radius:10px;

    border:1px solid #dbeafe;

    cursor:pointer;

    transition:.25s;

    background:#fff;

}

.mc-slot:hover{

    background:#2563eb;

    color:#fff;

}

.mc-slot.active{

    background:#2563eb;

    color:#fff;

}

/*=============================
    Mobile
=============================*/

@media(max-width:992px){

    .mc-week-days{

        grid-template-columns:repeat(4,1fr);

    }

}

@media(max-width:768px){

    .mc-calendar{

        padding:15px;

    }

    .mc-week-days{

        display:flex;

        overflow-x:auto;

        gap:10px;

        padding-bottom:10px;

        scroll-behavior:smooth;

    }

    .mc-day{

        min-width:110px;

        flex:0 0 auto;

    }

    .mc-week-days::-webkit-scrollbar{

        height:6px;

    }

    .mc-week-days::-webkit-scrollbar-thumb{

        background:#d1d5db;

        border-radius:10px;

    }

}












.mc-slots-wrapper{

    margin-top:30px;

}

.mc-slots-title{

    margin-bottom:15px;

    font-size:18px;

    font-weight:700;

}

.mc-slot-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));

    gap:12px;

}

.mc-slot{

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    border:2px solid #0d6efd;

    border-radius:10px;

    padding:14px;

    transition:.3s;

    background:#fff;

}

.mc-slot input{

    display:none;

}

.mc-slot span{

    font-weight:600;

}

.mc-slot:hover{

    background:#0d6efd;

    color:#fff;

}

.mc-slot input:checked + span{

    color:#fff;

}

.mc-slot:has(input:checked){

    background:#0d6efd;

    color:#fff;

}

.mc-slot.booked{

    background:#f5f5f5;

    border-color:#ddd;

    color:#999;

    cursor:not-allowed;

}

.mc-slot.booked:hover{

    background:#f5f5f5;

    color:#999;

}

.mc-no-slots{

    padding:20px;

    border-radius:10px;

    background:#fff3cd;

    color:#856404;

}