/* ------------------------------ Style for Datepicker ------------------------------ */
#ui-datepicker-div {
    border: 1px solid #ddd;
    border-radius: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    background: #fff;
    padding: 0.5em;
}

/* Header styling (month/year + navigation) */
.ui-datepicker-header {
    background: #f8f9f9;
    border: none;
    border-radius: 0;
    padding: 0.5em 0;
}

.ui-datepicker-title {
    font-weight: 500;
    text-align: center;
}

.ui-datepicker-prev, .ui-datepicker-next {
    cursor: pointer;
    top: 0.5em;
}

.ui-datepicker-prev span, .ui-datepicker-next span {
    display: none;
}

.ui-datepicker-prev:before {
    content: "←";
}

.ui-datepicker-prev {
    margin-right: unset !important;
    float: left;
}

.ui-datepicker-next:before {
    content: "→";
}

.ui-datepicker-next {
    float: right;
}

/* Calendar table styling */
.ui-datepicker-calendar {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}

.ui-datepicker-calendar th {
    font-weight: 500;
    padding: 0.5em;
    text-align: center;
    border: none;
}

.ui-datepicker-calendar td {
    padding: 0;
    border: 1px solid #eee;
}

.ui-datepicker-calendar td a, 
.ui-datepicker-calendar td span {
    padding: 0.5em;
    display: block;
    text-align: center;
    text-decoration: none;
}

/* Hover & active states */
.ui-datepicker-calendar td a:hover {
    background: #f0f0f0;
}

/* Disabled/unavailable dates */
.ui-datepicker-unselectable .ui-state-default {
    color: #ccc !important;
    background: #f9f9f9;
}

/* Today's date */
.ui-datepicker-today .ui-state-default {
    font-weight: bold;
}

/* Weekend dates */
.ui-datepicker-week-end .ui-state-default {
    color: #d54e21; /* Slightly red for weekends */
}
/* ------------------------------ End of Datepicker ------------------------------ */


/* ------------------------------ Style for Timepicker ------------------------------ */
.yayextra-time-picker {
    width: 50%;
}

.yayextra-time-picker input[type="number"] {
    padding: 6px;
    border: 1px solid #ddd;
    text-align: center;
    -moz-appearance: textfield; /* Hide arrows in Firefox */
}

.yayextra-time-picker input[type="number"]::-webkit-inner-spin-button,
.yayextra-time-picker input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Hide arrows in Chrome/Safari */
    margin: 0;
}

.yayextra-time-picker td.common {
    padding: 0 4px;
    font-weight: 500;
    color: #555;
}

/* Button row (Clear/Now/OK) */
.yayextra-time-picker table tr td {
    padding: 8px 12px;
    text-align: center;
    cursor: pointer;
    border: none;
}

.yayextra-time-picker .clear {
    color: #d94f4f;
}

.yayextra-time-picker .current {
    color: #1a1a1a;
}

.yayextra-time-picker .ok {
    color: #4f94d9;
    font-weight: 500;
}

/* Hover effects */
.yayextra-time-picker .clear:hover,
.yayextra-time-picker .current:hover,
.yayextra-time-picker .ok:hover {
    background: #f0f0f0;
}

/* Focus state for inputs */
.yayextra-time-picker input[type="number"]:focus {
    outline: none;
    border-color: #4f94d9;
    box-shadow: 0 0 0 1px #4f94d9;
}
/* ------------------------------ End of Timepicker ------------------------------ */