@import url("https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");

.search-panel-main {
    display: flex;
    justify-content: center;
    /*    height: 200px;*/
    align-items: center;
    background-color: transparent;
    border-radius: 18px;
}

.search-panel {
    max-width: fit-content;
    padding: 20px;
    background-color: white;
    box-shadow: 0 1px 2px rgb(0, 0, 0, 0.04);
    margin-top: 30px;
    margin-bottom: 30px;
}

.input-field {
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    height: 70px;
    box-sizing: border-box;
    background-color: white;
    color: #000;
}

    .input-field:focus,
    .input-field:active {
        outline: none !important; /* Ensure no outline on focus/active */
        box-shadow: none !important; /* Remove any shadow if applied */
    }

.swap-button {
    color: white;
    border: none;
    /*    padding: 0 15px;*/
    border-radius: 35px;
    cursor: pointer;
    font-size: 16px;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, transform 0.5s ease-in-out;
}

    .swap-button:hover {
        background-color: #575757;
        color: white !important;
        transform: rotate(180deg);
    }

.search-button {
    background: linear-gradient(90deg, #0a58ca 0%, #02419d 100%);
    color: white;
    /*    border: none;*/
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    height: 60px;
    border-radius: 10px !important;
    /*    transition: background-color 0.8s;*/
}

    .search-button:hover {
        background-color: #d10093;
        color: white;
    }

.date-picker {
    position: relative;
    /*    background-color: #fff;*/
    border-radius: 10px;
    /*    padding: 1px;*/
    border: 1px solid #e2e2e2;
}


.scroll-btn {
    background-color: #ccc0;
    color: #000;
    border: none;
    /*    border-radius: 15px;*/
    width: 50px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

    .scroll-btn:hover {
        color: #575757;
    }

/*    .scroll-btn.left {
        position: relative;
        border-right: 1px solid #e2e2e2;
        left: -10px;
    }

    .scroll-btn.right {
        position: relative;
        border-left: 1px solid #e2e2e2;
        right: -10px;
    }
*/



/* Animation keyframes */
@keyframes slide-left {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-8px);
    }

    50% {
        transform: translateX(3px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes slide-right {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(7px);
    }

    50% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(2px);
    }

    100% {
        transform: translateX(0);
    }
}

/* When animation active */
.scroll-btn i.animate-left {
    animation: slide-left 0.4s ease;
}

.scroll-btn i.animate-right {
    animation: slide-right 0.4s ease;
}


.dates {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden; /* Explicitly prevent vertical scrolling */
    scroll-behavior: smooth;
    width: 100%;
    scrollbar-width: none;
    padding: 3px;
    border-radius: 4px;
}

    .dates::-webkit-scrollbar {
        display: none;
    }

.date-container {
    display: flex;
    align-items: center;
    border-radius: 10px;
}

.date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 0 0 50px; /* unselected date in the list*/
    /*    padding: 20px;*/
    margin: 0 2px;
    border-radius: 10px;
    cursor: pointer;
    background-color: #f5f5f5;
    height: 50px;
    transition: all 0.2s ease-in-out;
    color: #6d6d6d;
}

    .date.selected {
        background-color: #001281;
        color: white;
        flex: 0 0 55px;
        padding: 5px;
        height: 58px;
        background: linear-gradient(45deg, #ff592c 0%, #fe986a 100%);
        /* background-color: #0dcaf0*/
    }

        .date.selected .weekday,
        .date.selected .month {
            color: white;
        }

        .date.selected .date-number {
            font-size: 20px;
        }

    .date.today {
        border: 1px solid #ff592c;
    }

    .date:not(.selected):hover {
        background-color: #ffe515;
        height: 55px;
        color: #333;
        box-shadow: #ffe515 0px -50px 36px -28px inset;
    }

.weekday {
    color: #575757;
    font-size: 12px;
    padding-bottom: 0;
    line-height: 1;
}

.date-number {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
}

.month {
    color: #979797;
    font-size: 12px;
    margin-top: -2px;
    line-height: 1;
}

@media (max-width: 1200px) {
    .input-field {
        background-color: white;
        color: #000;
    }

    /*    .search-panel-main {
        background-color: white;
        height: 200px;
        align-items: center;
        padding: 5px;
    }*/
}

@media (max-width: 590px) {
    .swap-button {
        transform: rotate(90deg);
    }

        .swap-button:hover {
            transform: rotate(270deg);
        }
}

@media (max-width: 768px) {

    .search-panel {
        max-width: 100%;
        padding: 2px;
        flex-direction: column;
        align-items: stretch;
        /*        border-radius: 8px;*/
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .input-field {
        background-color: white;
        border-bottom: 1px solid #e2e2e2;
    }

    .input-field,
    .date-picker,
    .search-button {
        width: 100%;
    }

    .swap-button {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin: 5px auto;
    }

    .search-button {
        height: 60px;
        width: 100px;
        font-size: 18px;
        margin: 5px auto;
    }

    .date {
        flex: 0 0 55px;
        height: 55px;
    }

        .date.selected {
            flex: 0 0 55px;
            height: 60px;
        }

    .weekday {
        font-size: 12px;
    }

    .date-number {
        font-size: 22px;
    }

    .month {
        font-size: 12px;
    }

    /*    .swap-button {
        transform: rotate(90deg);
    }

        .swap-button:hover {
            transform: rotate(270deg);
        }*/
}

.sticky-wrapper {
    top: 54px;
    z-index: 10;
}

/* No shadow initially */
.sticky-shadow {
    /*    border-bottom: 1px solid #ccc;*/
    /*    transition: border-bottom .3s ease-in-out;*/
    border-bottom: 5px solid #3300e2;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    box-shadow: 0 6px 20px rgb(131, 98, 237, 0.60);
}



.sticky-wrapper2 {
    top: 60px;
    z-index: 10;
}




/* Initial shape */
.sticky-shadow2 {
    border-radius: 15px;
    border-bottom: 5px solid #3300e5b7;
    box-shadow: 0 6px 20px rgb(131 98 237 / 60%);
    transition: border-radius .2s ease;
}

    /* When sticky (JS adds this class) */
    .sticky-shadow2.is-sticky {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }