@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
* {
    margin: 0;
    padding: 0;
    letter-spacing: -.5px;
    box-sizing: border-box;
    font-family: "DM Sans", sans-serif;
}

/* HEADER */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    background-color: white;
    position: sticky;
    top: 0px;
    z-index: 1000;
}


header p {
    font-size: 32px;
    letter-spacing: 0.0px;
    color: #00432d;
}

.category-dropdown p {
    padding: 13px 23px;
    border-radius: 30px;
    background-color: #00432d;
    color: white;

}

.category-dropdown span {
    padding: 12px 15px;
    border-radius: 30px;
    background-color: rgb(196, 196, 196);
}

.category-dropdown {
    display: flex;
    gap: 5px;
    padding: 0px 30px;
    background-color: white;
    width: 100%;
    color: black;
    margin: 0px auto;
    max-width: 1450px;
}

.sell-your-art {
    padding: 10px 19px;
    border-radius: 20px;
    margin-right: 4px;
    font-weight: 500;
    position: fixed;
    top: 180px;
    z-index: 10;
    right: 20px;
    color: white;
    background: rgb(0, 0, 0);
}

/* ------------------------------------------- */
/* Header state when search is active */
/* ------------------------------------------- */
header.search-mode-active {
    /* Ensure the logo is the only thing displayed in the header area */
    justify-content: center;
}

/* Hide the cart/profile icons list */
header.search-mode-active ul {
    display: none;
}

/* Hide the original search button that is inside the header */
header.search-mode-active .search-form button {
    display: none;
}

/* Hide the search form container itself from the header's flow when active, 
   UNLESS it is the fixed-active state. This is complex, so let's use opacity 
   and height to ensure the fixed element functions. */

/* When the header is in search mode, ensure the original search form area is hidden/collapsed */
header.search-mode-active .search-form:not(#header-search-form.fixed-active) {
    /* This rule should not be necessary since the element itself receives fixed-active */
    /* Let's rely on the fixed-active rules below */
}

header ul {
    display: flex;
    list-style: none;
}

header li {
    display: flex;
    align-items: center;
}

header a {
    color: black;
    padding: 0px 10px;
}

/* Search Form (Default State - in Header) */
.search-form {
    display: flex;
    align-items: center;
}

.search-form input {
    /* HIDE the input when it's in the header by default */
    display: none; 
}

.search-form button {
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(255, 255, 255, 0);
    padding: 0px 7px;
    cursor: pointer;
}

/* ------------------------------------------- */
/* FIXED Search Bar Container (Bottom) */
/* ------------------------------------------- */

/* When the form gets the 'fixed-active' class, it becomes a fixed bottom bar */
#header-search-form.fixed-active {
    /* Set an extremely high z-index to ensure it appears on top */
    z-index: 9999; 
    
    /* These rules make it fixed and full-width at the bottom */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
    padding: 15px 20px;
    background-color: #E9EBE7; /* Use a strong background color */
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.3); /* Stronger shadow */
    
    display: flex; /* Ensure it's displayed */
    justify-content: flex-start; 
}

/* Input style when the fixed bar is active */
#header-search-form.fixed-active input {
    display: block; 
    flex-grow: 1; 
    width: auto; 
    opacity: 1;
    transition: none; 
    
    border: 1px solid #0000003d;
    padding: 10px;
    border-radius: 20px;
    margin-right: 12px;
    background-color: white; 
}

/* Hide the original search icon/button inside the fixed bar */
#header-search-form.fixed-active button {
    display: none;
}

/* Make the link a positioning container */
#profile-btn {
    position: relative;
    display: inline-block;
}

/* Badge styles */
#profile-notif {
    position: absolute;
    top: -5px; 
    right: 3px; 
    background: red;
    color: white;
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 50%;
    line-height: 1;
    display: none; 
}

a {
    color: black;
    text-decoration: none;
}

@media (max-width: 600px) {
    .category-dropdown p {
        padding: 8px 15px;
        border-radius: 20px;
    }
    .category-dropdown span {
        padding: 7px 10px;
        border-radius: 30px;
        background-color: rgb(196, 196, 196);
    }
}