/* =========================================
   FLATPICKR CUSTOM THEME (Delta Style)
   ========================================= */

.flatpickr-calendar {
    border: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    font-family: inherit !important;
}

.flatpickr-months .flatpickr-month {
    background: #ffffff !important;
    color: var(--smt-navy) !important;
    height: 50px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper {
    font-weight: 700 !important;
    color: var(--smt-navy) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--smt-navy) !important;
    fill: var(--smt-navy) !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--smt-red) !important;
}

.flatpickr-weekdays {
    background: #ffffff !important;
}

span.flatpickr-weekday {
    color: #6c757d !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

.flatpickr-day {
    color: var(--smt-navy) !important;
    border-radius: 50% !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: #f0f4f8 !important;
    border-color: #f0f4f8 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
    background: var(--smt-navy) !important;
    border-color: var(--smt-navy) !important;
    color: #ffffff !important;
}

.flatpickr-day.inRange {
    background: #e6ecf2 !important;
    border-color: #e6ecf2 !important;
    border-radius: 0 !important;
    box-shadow: -5px 0 0 #e6ecf2, 5px 0 0 #e6ecf2 !important;
}

.flatpickr-day.today {
    border-color: var(--smt-red) !important;
}

.fp-custom-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    padding: 15px 15px 5px;
    margin-top: 10px;
}

.fp-btn-clear {
    background: transparent;
    border: none;
    color: var(--smt-sky);
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}

.fp-btn-clear:hover {
    text-decoration: underline;
}

.fp-btn-done {
    background: var(--smt-red);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.fp-btn-done:hover {
    background: var(--smt-red-hover);
}