:root {
    --cal-bg: #fdfaf5;
    --cal-card: #fff;
    --cal-card-soft: #fff8ef;
    --cal-primary: #ff9800;
    --cal-primary-dark: #f57c00;
    --cal-text: #241d18;
    --cal-muted: #766d65;
    --cal-border: #d7d7d7;
    --cal-border-soft: #e8ded4;
    --cal-cell-bg: #fff;
    --cal-cell-hover: #fff8ed;
    --cal-orange-light: #fff3df;
    --cal-good: #ff706b;
    --cal-bad: #766d65;
    --cal-shadow: 0 4px 18px rgba(67,45,25,.08);
}

html[data-theme="dark"],
body[data-theme="dark"],
html.dark,
body.dark,
body.dark-mode {
    --cal-bg: #100f0d;
    --cal-card: #191714;
    --cal-card-soft: #211d19;
    --cal-primary: #ff9800;
    --cal-primary-dark: #f57c00;
    --cal-text: #f5f0e8;
    --cal-muted: #b8aaa0;
    --cal-border: #403831;
    --cal-border-soft: #302a25;
    --cal-cell-bg: #191714;
    --cal-cell-hover: #25211c;
    --cal-orange-light: #2b2115;
    --cal-good: #ff706b;
    --cal-bad: #b8aaa0;
    --cal-shadow: 0 8px 30px rgba(0,0,0,.25);
}


/* =========================
   DATE INPUT
========================= */

.custom-date {
    width: 100%;
    outline: none;
    height: 54px;
    padding: 6px;
    border: 1px solid var(--cal-border);
    border-radius: 14px;
    font-size: 17px;
    font-family: 'HindVadodara';
    background: var(--cal-card);
    color: var(--cal-text);
    cursor: pointer;
    box-sizing: border-box;
    transition: .25s;
}

    .custom-date:focus {
        border-color: var(--cal-primary);
        box-shadow: 0 0 0 3px rgba(255, 152, 0, .12);
    }

.flatpickr-wrapper {
    width: 100%;
}


/* =========================
   CALENDAR
========================= */

.flatpickr-calendar {
    width: 270px !important;
    background: var(--cal-card) !important;
    border: 1px solid var(--cal-border-soft) !important;
    border-radius: 24px !important;
    overflow: hidden;
    box-shadow: var(--cal-shadow) !important;
    padding-bottom: 14px;
    font-family: 'HindVadodara' !important;
}


/* =========================
   MONTH HEADER
========================= */

.flatpickr-months {
    background: var(--cal-primary) !important;
    padding: 5px !important;
    position: relative;
}

.flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 88% !important;
    left: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}


/* =========================
   MONTH DROPDOWN
========================= */

.flatpickr-monthDropdown-months {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    font-family: 'HindVadodara' !important;
    appearance: none;
    cursor: pointer;
    padding-right: 0 !important;
}

    .flatpickr-monthDropdown-months option {
        background: var(--cal-card) !important;
        color: var(--cal-text) !important;
        font-size: 16px;
    }


/* =========================
   YEAR
========================= */

.numInputWrapper {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    position: relative;
}

.flatpickr-current-month input.cur-year {
    width: 75px !important;
    height: 30px;
    border: none !important;
    outline: none !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: center;
    border-radius: 8px;
    box-shadow: none !important;
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
}


/* =========================
   YEAR ARROWS
========================= */

.numInputWrapper span.arrowUp,
.numInputWrapper span.arrowDown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 18px;
    height: 18px;
    cursor: pointer;
    left: 70px;
}

    .numInputWrapper span.arrowUp:after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 7px solid #fff !important;
        content: "";
        display: block;
    }

    .numInputWrapper span.arrowDown:after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 7px solid #fff !important;
        content: "";
        display: block;
    }

.numInputWrapper span:hover {
    background: rgba(255,255,255,.18) !important;
    border-radius: 6px;
    transition: .2s;
}


/* =========================
   REMOVE NUMBER SPINNER
========================= */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield !important;
}


/* =========================
   PREV / NEXT MONTH
========================= */

.flatpickr-prev-month,
.flatpickr-next-month {
    top: 10px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
}

    .flatpickr-prev-month svg,
    .flatpickr-next-month svg {
        width: 16px !important;
        height: 16px !important;
        fill: #fff !important;
    }

    .flatpickr-prev-month:hover,
    .flatpickr-next-month:hover {
        background: rgba(255,255,255,.12) !important;
        border-radius: 50%;
    }


/* =========================
   WEEKDAYS
========================= */

.flatpickr-weekdays {
    background: var(--cal-card) !important;
    padding: 14px 10px 4px;
}

span.flatpickr-weekday {
    color: var(--cal-muted) !important;
    font-size: 15px;
    font-weight: 700;
    font-family: 'HindVadodara';
}


/* =========================
   DAYS WRAPPER
========================= */

.flatpickr-days {
    width: 100% !important;
    padding: 8px 12px 10px;
    box-sizing: border-box;
}

.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    justify-items: center;
}


/* =========================
   DAY DESIGN
========================= */

.flatpickr-day {
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    max-width: 30px !important;
    border: none !important;
    border-radius: 12px !important;
    background: var(--cal-cell-bg) !important;
    color: var(--cal-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    transition: .2s;
}


    /* =========================
   HOVER
========================= */

    .flatpickr-day:hover {
        background: var(--cal-cell-hover) !important;
        color: var(--cal-primary-dark) !important;
    }


    /* =========================
   SELECTED
========================= */

    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange {
        background: var(--cal-primary) !important;
        color: #fff !important;
    }


    /* =========================
   TODAY
========================= */

    .flatpickr-day.today {
        border: 2px solid var(--cal-primary) !important;
        color: var(--cal-primary-dark) !important;
    }


        /* Today + Selected */

        .flatpickr-day.today.selected {
            border-color: var(--cal-primary-dark) !important;
            background: var(--cal-primary) !important;
            color: #fff !important;
        }


    /* =========================
   PREVIOUS / NEXT MONTH DAYS
========================= */

    .flatpickr-day.prevMonthDay,
    .flatpickr-day.nextMonthDay {
        opacity: .35;
    }


    /* =========================
   DISABLED
========================= */

    .flatpickr-day.flatpickr-disabled {
        opacity: .25;
        cursor: not-allowed;
    }


/* =========================
   DARK MODE EXTRA FIXES
========================= */

html[data-theme="dark"] .flatpickr-calendar,
body[data-theme="dark"] .flatpickr-calendar,
html.dark .flatpickr-calendar,
body.dark .flatpickr-calendar,
body.dark-mode .flatpickr-calendar {
    color: var(--cal-text);
}

html[data-theme="dark"] .flatpickr-day:hover,
body[data-theme="dark"] .flatpickr-day:hover,
html.dark .flatpickr-day:hover,
body.dark .flatpickr-day:hover,
body.dark-mode .flatpickr-day:hover {
    background: var(--cal-cell-hover) !important;
}

html[data-theme="dark"] .flatpickr-weekdays,
body[data-theme="dark"] .flatpickr-weekdays,
html.dark .flatpickr-weekdays,
body.dark .flatpickr-weekdays,
body.dark-mode .flatpickr-weekdays {
    background: var(--cal-card) !important;
}