.custom-date {
    width: 100%;
    outline: none;
    height: 54px;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 14px;
    font-size: 17px;
    font-family: 'HindVadodara';
    background: #fff;
    cursor: pointer;
    box-sizing: border-box;
    transition: .25s;
}

.flatpickr-wrapper {
    width: 100%;
}

.flatpickr-calendar {
    width: 270px !important;
    background: #efb457 !important;
    border: none !important;
    border-radius: 24px !important;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0,0,0,.20) !important;
    padding-bottom: 14px;
    font-family: 'HindVadodara' !important;
}

.flatpickr-months {
    background: #8b0000 !important;
    padding: 5px !important;
    position: relative;
}

/* center month year */

.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;
}

    /* dropdown open */

    .flatpickr-monthDropdown-months option {
        background: #fff !important;
        color: #000 !important;
        font-size: 16px;
    }

/* =========================
   YEAR CLEAN FIX (FINAL PERFECT)
========================= */

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

/* YEAR INPUT */
.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;
}

/* =========================
   UP / DOWN ARROWS ALWAYS VISIBLE
========================= */

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

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

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

/* =========================
   ARROW HOVER ALWAYS WORKING
========================= */

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

/* remove browser 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;
}
/* =========================
   TOP LEFT RIGHT ARROWS
========================= */

.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;
    }

    /* hover */

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

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

.flatpickr-weekdays {
    background: #efb457 !important;
    padding: 14px 10px 4px;
}

span.flatpickr-weekday {
    color: #5c2200 !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: #f8cc7a !important;
    color: #2d1600 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

    /* hover */

    .flatpickr-day:hover {
        background: #ffe4ab !important;
    }

    /* selected */

    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange {
        background: #b93612 !important;
        color: #fff !important;
    }

    /* today */

    .flatpickr-day.today {
        border: 2px solid #8b1c00 !important;
    }

    /* prev next month */

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

    /* disabled */

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