/* =========================================
   RESET
========================================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =========================================
   BODY
========================================= */
body{
    font-family:Arial, sans-serif;

    background:
    linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
    url('images/bg.jpg');

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    color:white;
    overflow-x:hidden;
}

/* =========================================
   HEADER
========================================= */
.header{
    width:100%;
    height:130px;
    background:#1e1e1e;
    box-shadow:0 2px 10px rgba(0,0,0,0.2);

    display:flex;
    justify-content:center;
    align-items:center;
}

/* INNER LAYOUT (MAIN FIX HERE) */
.header-inner{
    width:90%;
    height:100%;

    display:flex;
    align-items:center;

    justify-content:space-between;
    gap:20px;
}

/* =========================================
   LOGO
========================================= */
.logo{
    font-size:28px;
    font-weight:bold;
    color:white;

    flex:0 0 auto;
}

/* =========================================
   NAVIGATION
========================================= */
.navbar{
    flex:1;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
}

/* BUTTONS */
.nav-btn{
    padding:8px 18px;

    border:none;
    border-radius:10px;

    background:#ff9800;
    color:white;

    font-size:16px;
    font-weight:bold;
    text-decoration:none;

    cursor:pointer;
    transition:0.3s;
}

.nav-btn:hover{
    background:#ffb84d;
    transform:translateY(-2px);
}

/* =========================================
   USER BAR (LOGIN AREA FIX)
========================================= */
.user-bar{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    gap:10px;

    white-space:nowrap;
}

.user-bar a{
    color:#ff9800;
    text-decoration:none;
    font-weight:bold;
}

.user-bar a:hover{
    color:#ffb84d;
}

/* =========================================
   SPACE BELOW HEADER
========================================= */
.space{
    height:8px;
}

/* =========================================
   FILTER BAR
========================================= */
.category-bar-container,
.author-bar-container{
    display:flex;
}

.filter-bar-container{
    width:90%;
    margin:0 auto;

    display:flex;
    justify-content:flex-start;
    gap:15px;
    align-items:center;
}

/* SELECT STYLE */
#categorySelect,
#authorSelect{
    width:fit-content;
    min-width:180px;

    padding:8px 10px;

    border:none;
    border-radius:10px;

    background:white;
    color:#222;

    font-size:12px;
    font-weight:bold;

    cursor:pointer;
    outline:none;

    box-shadow:0 2px 10px rgba(0,0,0,0.12);
    transition:0.3s;
}

#categorySelect:hover,
#authorSelect:hover{
    background:#e8f1ff;
}

#categorySelect:focus,
#authorSelect:focus{
    background:#dbe9ff;
}

/* =========================================
   MOBILE FIX
========================================= */
@media (max-width:768px){

    .header{
        height:auto;
        padding:10px 0;
    }

    .header-inner{
        flex-direction:column;
        gap:10px;
        height:auto;
    }

    .logo{
        font-size:20px;
        text-align:center;
    }

    .navbar{
        justify-content:center;
    }

    .user-bar{
        justify-content:center;
        flex-wrap:wrap;
    }

    .nav-btn{
        padding:6px 14px;
        font-size:12px;
    }

    .filter-bar-container{
        width:90%;
    }
}