:root {
    --td-primary: #2563EB;
    --td-primary-hover: #1D4ED8;
    --td-warning: #EBA00A;
    --td-bg: #FFFFFF;
    --td-border: #E5E7EB;
    --td-text: #111827;
    --td-text-light: #6B7280;
    --td-shadow: 0 12px 40px rgba(0,0,0,.15);
    --td-radius: 14px;
}

.date-input {
    cursor: pointer;
    background: #fff;
    transition: .25s;
}

    .date-input:hover {
        border-color: var(--td-primary);
    }

    .date-input:focus {
        border-color: var(--td-primary);
        box-shadow: 0 0 0 4px rgba(37,99,235,.12);
    }

.air-datepicker.travel-datepicker {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--td-shadow);
    background: #fff;
    font-family: inherit;
}

.air-datepicker-nav {
    border-bottom: 1px solid var(--td-border);
    padding: 12px;
}



.air-datepicker-nav--title {
    font-size: 17px;
    font-weight: 700;
    color: var(--td-text);
}



.air-datepicker-nav--action {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    transition: .2s;
}



    .air-datepicker-nav--action:hover {
        background: #EFF6FF;
    }


.air-datepicker-body--day-name {
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.air-datepicker-cell {
    border-radius: 10px;
    transition: .2s;
    font-size: 14px;
}



    .air-datepicker-cell:hover {
        background: #EFF6FF;
    }



    .air-datepicker-cell.-selected- {
        background: var(--td-primary);
        color: #fff;
    }



        .air-datepicker-cell.-selected-:hover {
            background: var(--td-primary-hover);
        }



    .air-datepicker-cell.-current- {
        border: 2px solid var(--td-warning);
        color: var(--td-warning);
    }



    .air-datepicker-cell.-disabled- {
        opacity: .3;
    }

.air-datepicker-body--cells.-months- .air-datepicker-cell {
    height: 54px;
    font-weight: 600;
}

.air-datepicker-body--cells.-years- .air-datepicker-cell {
    height: 50px;
}

.air-datepicker-buttons {
   
    padding: 10px;
}



.air-datepicker-button {
    height: 40px;
    border-radius: 10px;
    transition: .2s;
    font-weight: 600;
}



    .air-datepicker-button:hover {
        background: #EFF6FF;
    }

    .air-datepicker-button[data-action="today"] {
        color: var(--td-primary);
    }

    .air-datepicker-button[data-action="clear"] {
        color: #EF4444;
    }

.air-datepicker {
    animation: travelDatePopup .22s;
}



@keyframes travelDatePopup {

    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



@media(max-width:768px) {

    .air-datepicker.travel-datepicker {
        width: calc(100vw - 24px);
        left: 12px !important;
        right: 12px !important;
    }
}


.air-datepicker *::-webkit-scrollbar {
    width: 8px;
}

.air-datepicker *::-webkit-scrollbar-thumb {
    background: #d6d6d6;
    border-radius: 20px;
}

    .air-datepicker *::-webkit-scrollbar-thumb:hover {
        background: #999;
    }


.air-datepicker-body--cells.-years- {
    gap: 8px;
}



.air-datepicker-body--cells.-months- {
    gap: 8px;
}



.air-datepicker-cell.-year- {
    border-radius: 10px;
}



.air-datepicker-cell.-month- {
    border-radius: 10px;
}


    .air-datepicker-cell.-month-.-selected- {
        background: var(--td-primary);
    }

.air-datepicker-cell.-year-.-selected- {
    background: var(--td-primary);
}


.air-datepicker-cell.-weekend- {
    color: #ef4444;
}


.air-datepicker-cell.-other-month- {
    color: #c8c8c8;
}

@media(max-width:480px) {

    .air-datepicker-nav--title {
        font-size: 15px;
    }

    .air-datepicker-cell {
        height: 38px;
    }
}