/* Modern, Airbnb-style styling for MotoPress Hotel Booking Calendar */

.datepick {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 12px;
    font-family: 'Circular', -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    padding: 20px;
}

.datepick-nav, .datepick-ctrl {
    background-color: transparent !important;
    border: none !important;
    color: #222222 !important;
}

.datepick-month-header {
    background-color: transparent !important;
    color: #222222 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 12px;
}

.datepick-month table {
    border-collapse: collapse !important;
    width: 100% !important;
}

.datepick-month th {
    background-color: transparent !important;
    border: none !important;
    color: #717171 !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    padding-bottom: 10px;
}

.datepick-month th a {
    color: #717171 !important;
}

.datepick-month td {
    background-color: transparent !important;
    border: none !important;
    padding: 2px !important;
    text-align: center;
}

/* Base style for all days */
.datepick-month td span, .datepick-month td a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #222222 !important;
    background-color: transparent !important;
    text-decoration: none !important;
    line-height: normal;
    margin: 0 auto;
    transition: background-color 0.2s ease, border 0.2s ease;
    border: 1px solid transparent;
}

/* Hover effect for selectable dates */
.datepick-month td a:hover {
    background-color: #f7f7f7 !important;
    border: 1px solid #222222 !important;
}

/* Selected dates */
.datepick-month td.datepick-selected a {
    background-color: #222222 !important;
    color: #ffffff !important;
}

/* Make unavailable dates clearly crossed out and red (Airbnb style) */
.datepick-month td.datepick-unselectable span,
.datepick-month td.mphb-booked-date span {
    text-decoration: line-through !important;
    color: #b0b0b0 !important;
    background-color: transparent !important;
    opacity: 0.6;
    border: none !important;
}

/* Make "booked" specifically slightly reddish line-through to match instructions */
.datepick-month td.mphb-booked-date span,
.datepick-month td.datepick-unselectable.mphb-booked-date span {
    color: #ff5a5f !important;
    text-decoration-color: #ff5a5f !important;
    font-weight: 500 !important;
    opacity: 0.8 !important;
}

/* Special treatment for today */
.datepick-month td.datepick-today a {
    border: 1px solid #dddddd !important;
}

/* Hide the old black header backgrounds */
.datepick-header, .datepick-month-row {
    background: transparent !important;
    border: none !important;
}

/* Remove default dark color from table elements */
.datepick-month th, .datepick-month th a {
    background-color: transparent !important;
    border: none !important;
}

/* The arrow buttons */
.datepick-cmd {
    font-weight: bold;
    color: #222222 !important;
    background: transparent !important;
    border: none !important;
}
.datepick-cmd:hover {
    background: #f7f7f7 !important;
    border-radius: 50%;
}