/* static/css/pages/responsiveMedia_header.css */


@media (max-width: 370px) {
/* TOP HEADER */
    header {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        height: 60px;
        
    }
    .search_bar {
        display: none;
    }

    .header_logoText {
        height: 1.5rem;
        width: 100%;
    }

    .header_logoText img {
        display: block;
        width: 100%;          /* scale with parent */
        height: auto;         /* keep aspect ratio */
        max-width: 160px;     /* don’t exceed 200px */
        min-width: 96px;     /* don’t shrink below 120px */
    }

    .header_icons {
        width: 100%;
        justify-content: center;
    }

    .header_register i,
    .header_language i,
    .header_cart i {
        font-size: 25px;
        cursor: pointer;
        color: #333;              /* ✅ default black */
    }

    .dropdown {
        display: none;            /* hidden by default */
        position: absolute;
        top: 100%;                /* directly below icon */
        left: -110%;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 10px;
        list-style: none;
        padding: 5px 5px;
        margin: 0;
        width: auto;
        white-space: nowrap;
        z-index: 9999;
    }
    .dropdown ul {
        padding: 5px 0px 5px 0px;
        width: auto;
    }

    .dropdown li {
        font-size: 0.9rem;
    }
}

@media (min-width: 371px) and (max-width: 490px) {
/* TOP HEADER */
    header {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        height: 80px;
    }
    .search_bar {
        display: none;
    }

    .header_logoText {
        height: 2rem;
        width: 100%;
    }

    .header_logoText img {
        display: block;
        width: 100%;          /* scale with parent */
        height: auto;         /* keep aspect ratio */
        max-width: 200px;     /* don’t exceed 200px */
        min-width: 120px;     /* don’t shrink below 120px */
    }

    .header_icons {
        width: 100%;
        justify-content: center;
    }

    .header_register i,
    .header_language i,
    .header_cart i {
        font-size: 1.7rem;
        cursor: pointer;
        color: #333;              /* ✅ default black */
    }

    .dropdown {
        display: none;            /* hidden by default */
        position: absolute;
        top: 100%;                /* directly below icon */
        left: -90%;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 10px;
        list-style: none;
        padding: 5px 5px;
        margin: 0;
        width: 100px;
        z-index: 9999;
    }
    .dropdown ul {
        padding: 5px 0px 5px 0px;
        width: 70px;
    }

    .dropdown li {
        font-size: 1rem;
    }
}

@media (min-width: 491px) and (max-width: 800px) {
/* TOP HEADER */
    header {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        height: 100px;
    }
    .search_bar {
        display: none;
    }

    .header_logoText {
        height: 2.5rem;
        width: 100%;
    }

    .header_logoText img {
        display: block;
        width: 100%;          /* scale with parent */
        height: auto;         /* keep aspect ratio */
        max-width: 300px;     /* don’t exceed 200px */
        min-width: 180px;     /* don’t shrink below 120px */
    }

    .header_icons {
        width: 100%;
        justify-content: space-evenly;
    }

    .header_register i,
    .header_language i,
    .header_cart i {
        font-size: 2.5rem;
        cursor: pointer;
        color: #333;              /* ✅ default black */
    }

    .dropdown {
        display: none;            /* hidden by default */
        position: absolute;
        top: 100%;                /* directly below icon */
        left: -70%;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 10px;
        list-style: none;
        padding: 5px 5px;
        margin: 0;
        width: 130px;
        z-index: 9999;
    }
    .dropdown ul {
        padding: 5px 0px 5px 0px;
        width: 70px;
    }

    .dropdown li {
        font-size: 1.2rem;
    }
}

@media (min-width: 801px) and (max-width: 1025px) {
/* TOP HEADER */
    header {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        height: 120px;
    }
    .search_bar {
        display: none;
    }

    .header_logoText {
        height: 4rem;
        width: 100%;
    }

    .header_logoText img {
        display: block;
        width: 100%;          /* scale with parent */
        height: auto;         /* keep aspect ratio */
        max-width: 700px;     /* don’t exceed 200px */
        min-width: 420px;     /* don’t shrink below 120px */
    }

    .header_icons {
        width: 100%;
        justify-content: space-evenly;
        height: 4rem;
    }

    .header_register i,
    .header_language i,
    .header_cart i {
        font-size: 2.5rem;
        cursor: pointer;
        color: #333;              /* ✅ default black */
    }

    .dropdown {
        display: none;            /* hidden by default */
        position: absolute;
        top: 100%;                /* directly below icon */
        left: -70%;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 10px;
        list-style: none;
        padding: 5px 5px;
        margin: 0;
        width: 130px;
        z-index: 9999;
    }
    .dropdown ul {
        padding: 5px 0px 5px 0px;
        width: 70px;
    }

    .dropdown li a{
        font-size: 1.1rem;
    }
}

@media (min-width: 1026px) and (max-width: 1205px) {
/* TOP HEADER */
    header {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        height: 120px;
    }
    .search_bar {
        width: 30%;
    }

    .header_logoText {
        height: 4.2rem;
        width: 40%
    }

    .header_logoText img {
        display: block;
        width: 100%;          /* scale with parent */
        height: auto;         /* keep aspect ratio */
        max-width: 600px;     /* don’t exceed 200px */
        min-width: 360px;     /* don’t shrink below 120px */
    }

    .header_icons {
        width: 30%;
        justify-content: center;
        height: 4rem;
        gap: 20px;
        padding-right: 70px;
    }

    .header_register i,
    .header_language i,
    .header_cart i {
        font-size: 2.2rem;
        cursor: pointer;
        color: #333;              /* ✅ default black */
    }

    .dropdown {
        display: none;            /* hidden by default */
        position: absolute;
        top: 100%;                /* directly below icon */
        left: -70%;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 10px;
        list-style: none;
        padding: 5px 5px;
        margin: 0;
        width: 130px;
        z-index: 9999;
    }
    .dropdown ul {
        padding: 5px 0px 5px 0px;
        width: 70px;
        
    }

    .dropdown li {
        font-size: 1.2rem;
    }
}

@media (min-width: 1206px){
/* TOP HEADER */
    header {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        height: 130px;
    }
    .search_bar {
        width: 30%;
    }

    .header_logoText {
        height: 4.2rem;
        width: 40%
    }

    .header_logoText img {
        display: block;
        width: 100%;          /* scale with parent */
        height: auto;         /* keep aspect ratio */
        max-width: 600px;     /* don’t exceed 200px */
        min-width: 360px;     /* don’t shrink below 120px */
    }

    .header_icons {
        width: 30%;
        justify-content: center;
        height: 4rem;
        gap: 20px;
        padding-right: 70px;
    }

    .header_register i,
    .header_language i,
    .header_cart i {
        font-size: 2.2rem;
        cursor: pointer;
        color: #333;              /* ✅ default black */
    }

    .dropdown {
        display: none;            /* hidden by default */
        position: absolute;
        top: 100%;                /* directly below icon */
        left: -70%;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 10px;
        list-style: none;
        padding: 5px 5px;
        margin: 0;
        width: 130px;
        z-index: 9999;
    }
    .dropdown ul {
        padding: 5px 0px 5px 0px;
        width: 70px;
        
    }

    .dropdown li {
        font-size: 1.2rem;
    }
}