/* ==========================================================
   CF7 Smart Datepicker
   Version: 1.0.0
   ========================================================== */

.cf7-smart-datepicker {
    position: absolute;
    z-index: 99999;
    display: none;

    width: 320px;

    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;

    box-shadow: 0 10px 30px rgba(0,0,0,.12);

    user-select: none;
}

.cf7-smart-datepicker.open {
    display: block;
}

.cf7-smart-datepicker * {
    box-sizing: border-box;
}

/* Header */

.cf7-smart-header {

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:12px 15px;

    border-bottom:1px solid #ececec;

    font-weight:600;
}

.cf7-smart-prev,
.cf7-smart-next{

    cursor:pointer;

    width:32px;
    height:32px;

    border:none;
    border-radius:6px;

    background:#f5f5f5;

    transition:.2s;
}

.cf7-smart-prev:hover,
.cf7-smart-next:hover{

    background:#e9e9e9;
}

/* Weekdays */

.cf7-smart-weekdays{

    display:grid;
    grid-template-columns:repeat(7,1fr);

    padding:10px;

    font-size:12px;
    font-weight:600;
    color:#666;

    text-align:center;
}

/* Days */

.cf7-smart-days{

    display:grid;
    grid-template-columns:repeat(7,1fr);

    gap:4px;

    padding:0 10px 10px;
}

.cf7-smart-day{

    display:flex;
    align-items:center;
    justify-content:center;

    height:40px;

    border-radius:6px;

    cursor:pointer;

    transition:.15s;
}

.cf7-smart-day:hover{

    background:#efefef;
}

.cf7-smart-day.disabled{

    color:#c7c7c7;

    cursor:not-allowed;

    background:#fafafa;
}

.cf7-smart-day.today{

    border:1px solid #3b82f6;
}

.cf7-smart-day.selected{

    background:#3b82f6;
    color:#fff;
}

/* Empty cells */

.cf7-smart-empty{

    height:40px;
}

/* Mobile */

@media (max-width:480px){

    .cf7-smart-datepicker{

        width:100%;
        max-width:340px;
    }

}