/*  Overall calendar container  */
.datepicker {
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    font-family: inherit;
    padding: 8px;
}

/*  Header (month/year title)  */
.datepicker-header {
    padding: 8px 4px;
}

.datepicker-controls .button {
    font-weight: 600;
    font-size: 15px;
    border: none;
    background: none;
    cursor: pointer;
    color: #333;
}

.datepicker-controls .button:hover {
    background: #f0f0f0;
    border-radius: 6px;
}

/*  Day names row (Su Mo Tu...)  */
.datepicker-grid .dow {
    font-weight: 600;
    color: #888;
    font-size: 13px;
}

/*  Day cells  */
.datepicker-cell {
    border-radius: 8px !important;
    font-size: 14px;
    color: #333;
}

.datepicker-cell:hover {
    background: #ff6060 !important;
    color: #fff !important;
    border-radius: 8px !important;
}

/*  TODAY: only show dot, NO background  */
.datepicker-cell.today {
    background: none !important;
    color: #333 !important;
    font-weight: 700;
}

/* SELECTED date */
.datepicker-cell.selected,
.datepicker-cell.selected:hover {
    background: #ff4545 !important;
    color: white !important;
    border-radius: 8px !important;
}

/*  When today IS the selected date  */
.datepicker-cell.today.selected::after {
    background: white;
}

/*  Greyed out dates (prev/next month)  */
.datepicker-cell.prev,
.datepicker-cell.next {
    color: #ccc !important;
}

/*  Disabled dates  */
.datepicker-cell.disabled {
    color: #ddd !important;
    cursor: not-allowed;
}

/* REMOVE THIS BLOCK ENTIRELY */
.datepicker-cell.today::after {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    background: #20c997;
    border-radius: 50%;
    margin: 2px auto 0;
}