/* =========================================================
   SAFE HAND INSURANCE
   FLATPICKR CALENDAR
   FINAL CLEAN UI
   ========================================================= */


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

.app-date {

    width: 100%;

    cursor: pointer !important;

    background-color: #ffffff !important;

}


/* Flatpickr visible input */

.flatpickr-input[readonly] {

    cursor: pointer !important;

    background-color: #ffffff !important;

}


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

.flatpickr-calendar {

    z-index: 999999 !important;

    width: 340px;

    background: #ffffff;

    border: none;

    border-radius: 14px;

    box-shadow:
        0 18px 45px
        rgba(15, 23, 42, 0.22);

    overflow: visible;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


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

.flatpickr-months {

    height: 62px;

    background:
        linear-gradient(
            135deg,
            #0F3D91,
            #2563EB
        );

    color: #ffffff;

    border-radius:
        14px 14px 0 0;

}


/* Month */

.flatpickr-months .flatpickr-month {

    height: 62px;

    background: transparent;

    color: #ffffff;

}


/* =========================================================
   CURRENT MONTH / YEAR
   ========================================================= */

.flatpickr-current-month {

    color: #ffffff !important;

    font-size: 16px !important;

    font-weight: 700;

    height: 62px;

    padding-top: 0 !important;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

}


/* =========================================================
   MONTH SELECT
   ========================================================= */

.flatpickr-current-month
.flatpickr-monthDropdown-months {

    color: #ffffff !important;

    background:
        transparent !important;

    border: none !important;

    outline: none !important;

    font-size: 16px !important;

    font-weight: 700;

    cursor: pointer;

    padding:
        6px 8px;

    border-radius: 7px;

}


/* Month hover */

.flatpickr-current-month
.flatpickr-monthDropdown-months:hover {

    background:
        rgba(255,255,255,.15) !important;

}


/* Month options */

.flatpickr-current-month
.flatpickr-monthDropdown-months option {

    background: #ffffff;

    color: #1E293B;

    font-size: 14px;

}


/* =========================================================
   CUSTOM YEAR SELECT
   ========================================================= */

.safehand-year-select {

    appearance: auto;

    -webkit-appearance: auto;

    background:
        transparent;

    color:
        #ffffff;

    border:
        none;

    outline:
        none;

    font-size:
        16px;

    font-weight:
        700;

    cursor:
        pointer;

    padding:
        6px 8px;

    border-radius:
        7px;

    min-width:
        72px;

    text-align:
        center;

}


/* Year hover */

.safehand-year-select:hover {

    background:
        rgba(255,255,255,.15);

}


/* Year options */

.safehand-year-select option {

    background:
        #ffffff;

    color:
        #1E293B;

    font-size:
        14px;

    font-weight:
        500;

}


/* =========================================================
   PREVIOUS / NEXT
   ========================================================= */

.flatpickr-prev-month,
.flatpickr-next-month {

    top:
        13px !important;

    width:
        36px !important;

    height:
        36px !important;

    border-radius:
        50%;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    color:
        #ffffff !important;

    fill:
        #ffffff !important;

    transition:
        all .2s ease;

}


/* Previous */

.flatpickr-prev-month {

    left:
        10px !important;

}


/* Next */

.flatpickr-next-month {

    right:
        10px !important;

}


/* Arrow hover */

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {

    background:
        rgba(255,255,255,.18);

}


/* Arrow */

.flatpickr-prev-month svg,
.flatpickr-next-month svg {

    fill:
        #ffffff !important;

    width:
        14px;

    height:
        14px;

}


/* =========================================================
   WEEK DAYS
   ========================================================= */

.flatpickr-weekdays {

    height:
        42px;

    background:
        #ffffff;

    border-bottom:
        1px solid #F1F5F9;

}


span.flatpickr-weekday {

    color:
        #64748B !important;

    font-size:
        11px;

    font-weight:
        700;

    text-transform:
        uppercase;

}


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

.flatpickr-days {

    padding:
        8px 10px 12px;

}


/* Individual day */

.flatpickr-day {

    max-width:
        40px;

    height:
        38px;

    line-height:
        38px;

    margin:
        1px;

    border:
        1px solid transparent;

    border-radius:
        9px;

    color:
        #1E293B;

    font-size:
        13px;

    font-weight:
        500;

    transition:
        all .15s ease;

}


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

.flatpickr-day:hover {

    background:
        #EFF6FF !important;

    border-color:
        #BFDBFE !important;

    color:
        #1D4ED8 !important;

}


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

.flatpickr-day.selected,
.flatpickr-day.selected:hover {

    background:
        linear-gradient(
            135deg,
            #2563EB,
            #1D4ED8
        ) !important;

    border-color:
        #2563EB !important;

    color:
        #ffffff !important;

    box-shadow:
        0 5px 12px
        rgba(37,99,235,.28);

}


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

.flatpickr-day.today {

    border:
        2px solid #F97316 !important;

    color:
        #EA580C !important;

    font-weight:
        700;

}


/* Today + Selected */

.flatpickr-day.today.selected {

    background:
        linear-gradient(
            135deg,
            #2563EB,
            #1D4ED8
        ) !important;

    border:
        2px solid #F97316 !important;

    color:
        #ffffff !important;

}


/* =========================================================
   OTHER MONTH DAYS
   ========================================================= */

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {

    color:
        #CBD5E1 !important;

}


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

.flatpickr-day.flatpickr-disabled {

    color:
        #CBD5E1 !important;

    cursor:
        not-allowed;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .flatpickr-calendar {

        width:
            calc(100vw - 20px);

        max-width:
            360px;

        border-radius:
            14px;

    }


    .flatpickr-current-month {

        font-size:
            15px !important;

    }


    .flatpickr-current-month
    .flatpickr-monthDropdown-months {

        font-size:
            15px !important;

    }


    .safehand-year-select {

        font-size:
            15px;

        min-width:
            65px;

    }


    .flatpickr-day {

        max-width:
            39px;

        height:
            37px;

        line-height:
            37px;

    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .flatpickr-calendar {

        width:
            calc(100vw - 16px);

        max-width:
            350px;

    }


    .flatpickr-prev-month,
    .flatpickr-next-month {

        width:
            32px !important;

        height:
            32px !important;

    }


    .flatpickr-prev-month {

        left:
            7px !important;

    }


    .flatpickr-next-month {

        right:
            7px !important;

    }


    .flatpickr-day {

        max-width:
            37px;

        height:
            35px;

        line-height:
            35px;

        font-size:
            12px;

    }

}


/* =========================================================
   Z-INDEX
   ========================================================= */

.flatpickr-calendar.open {

    z-index:
        999999 !important;

}