/* ============================================================ */
/* Responsive into windows */
/* ============================================================ */
/* Media query for screens less than 1000px wide */
@media (min-width: 769px) and (max-width: 1049px) {
   
    #centerpanel{
        margin-left: .5rem;
        margin-right: .5rem;

    }

    #rightpanel{
        margin-left: .5rem;
        margin-right: .5rem;
    }


    #joboLogo{
        width: 5.5rem;
        object-fit: cover;
        object-position: left;
    }


    .menu_text{
        display: none;
    }
    
    #leftpanel > .taboption{
        min-width: 0rem;
        max-width: fit-content;
    }

    #leftpanel > #partnership{
        display: none;
    }
}


/* ============================================================ */
/* Responsive for portable */
/* ============================================================ */
/* Media query for screens between 769px and 1049px wide */

@media (max-width: 1049px) {
    #rightpanel {
        display: none; /* Hide the right panel */
        position: fixed;
        right: 0;
        top: 0;
        height: 98vh;
        margin: 0;
        padding: 1rem;
        width: 70%; /* Adjust width as needed */
        background-color: var(--back-color-3);
        box-shadow: -2px 0 5px rgba(0,0,0,0.1); /* Optional shadow */
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        z-index: 15;
    }

    #centerpanel {
        display: block; /* Ensure the center panel is shown */
        transition: filter 0.3s ease-in-out;
    }

    #centerpanel.blur {
        filter: blur(5px);
    }

    #leftpanel {
        display: none; /* Hide the left panel */
        position: fixed;
        top: 0;
        left: 0;
        height: 98vh;
        width: 80%;
        background-color: var(--back-color-3);
        box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* Optional shadow */
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
    }

    /* Add styles for left menu appearing on top */
    #leftpanel.show {
        display: block;
        transform: translateX(0);
    }

    /* Add styles for right menu appearing on top */
    #rightpanel.show {
        display: block;
        transform: translateX(0);
    }

    /* Add blur effect for the rest of the screen */
    #leftpanel.show ~ ::before,
    #rightpanel.show ~ ::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        z-index: 999;
        transition: opacity 0.3s ease-in-out;
        opacity: 1;
    }

    /* Ensure blur effect disappears when panels are hidden */
    #leftpanel:not(.show) ~ ::before,
    #rightpanel:not(.show) ~ ::before {
        opacity: 0;
    }

    #jobsinfinity {    
        min-width: 15rem !important;
    }
}

/* Top Menu Styles */
.top-menu {  
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: var(--back-color-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: top 0.3s ease-in-out;
    z-index: 16;
}

.top-menu.hide {
    top: -50px;
}

/* Top Menu Styles */
#topMenuPortable {      
    display: none;
    position: absolute;
    align-items: center;
    top: 0;
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    z-index: 12;
    background-color: var(--back-color-opacity-70);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--hr-color);
    transition: top 0.3s ease-in-out;
}

#topMenuPortable.show {
    display: flex; 
}

#topMenuPortable.hide {
    top: -6rem;
}

#topMenuPortable.blur {
    filter: blur(5px);
}

#joboLogoPortable{
    width: 9rem;
    max-height: 3rem;
    object-fit: cover;
    object-position: left;
}

#menuButtonPortable{
    margin:.4rem;
    margin-right:auto;
}

#filterButtonPortable{
    margin:.4rem;
    margin-left:auto;
}

.top-menu-icon{  
    padding: 0.4rem;
    margin: 0.4rem;
    border-radius: 0.3rem;
    width: 14px;
    height: 14px;
    opacity: 100%;
    border: 0.1rem solid rgba(0, 0, 0, 0.7);
    filter: invert(var(--invert-level));
    transition: background-color .3s;
}