/* static/css/pages/home_header.css */


.hidden {
    display: none;
}



/* ===========================================================
   HEADER GLOBAL SETTINGS
   =========================================================== */
header {
    display: grid;
    grid-template-columns: repeat(16, 1fr); /* 16-column grid */
    row-gap: 10px;
    align-items: center;
    justify-items: center;
    height: 120px;
    padding: 0 20px;
    width: 90%;              /* match topPromotion width */
    margin: 0 auto;          /* center horizontally */
}

/* ===========================================================
   LOGO TEXT
   =========================================================== */
.header_logoText {
    grid-column: 2 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.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 */
}

/* ===========================================================
   SEARCH BAR
   =========================================================== */
.search_bar {
    grid-column: 5 / 13;      /* spans columns 5–12 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; 
    height: 50px;
}

/* Wrapper for input + button */
.search_input_wrapper {
    position: relative;
    width: 90%;
    height: 100%;
}

/* Input field */
.search_input_wrapper input {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    padding: 0 50px 0 16px;   /* space for icon on right */
    border: 1px solid #ccc;
    font-size: 16px;
}

/* Search button (inside input) */
.search_input_wrapper .search_btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: #0078D7;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    width: 36px;
    height: 36px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;

    transition: background 0.3s, width 0.2s, height 0.2s;
}
.search_input_wrapper .search_btn:hover {
    background: #df4700;
    width: 34px;   /* subtle shrink effect */
    height: 34px;
}

/* ===========================================================
   HEADER ICONS (register, language, cart)
   =========================================================== */
.header_icons {
    grid-column: 13 / 16;     /* spans columns 13–15 */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

/* Individual icon containers */
.header_register,
.header_language,
.header_cart {
    position: relative;       /* dropdown positioned relative to icon */
}

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

/* Links inside dropdowns also black */
.header_register a,
.header_language a,
.header_cart a {
    color: #333;
    text-decoration: none;
}

/* Hover highlight for all three */
.header_register:hover i,
.header_register a:hover,
.header_language:hover i,
.header_language a:hover,
.header_cart:hover i,
.header_cart a:hover {
    color: #093ba8;           /* ✅ highlight blue */
}

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

/* Dropdown items */
.dropdown li {
    padding: 5px;
    cursor: pointer;
}
.dropdown li:hover {
    background: #f0f0f0;
}

/* Show dropdown on hover */
.header_register:hover .dropdown,
.header_language:hover .dropdown,
.header_cart:hover .dropdown {
    display: block;
}