/* ----------------------------- CSS for Header container -------------------------------- */
header {
    background-color: var(--header-color);
    width: 100%;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    z-index: 100;
}

/* ------------------- Common CSS for all 3 main div in Header container --------------------- */
.div-amazon-img, .div-search-bar, .div-cart-order {
    display: flex;
    justify-content: center;
    align-items: center;
}

.div-cart-order, .div-search-bar {
    height: 100%;
}

/* ---------------------------------- Border Hover Effect ----------------------------------- */
/* Common CSS for 1st main div and inner div of 3rd main div */
.div-amazon-img, .div-order-and-return, .div-cart {
    height: 80%;
    border: 1px solid transparent;
}

.div-amazon-img:hover, .div-order-and-return:hover, .div-cart:hover {
    border-color: white;
}


/* ---------------------------------CSS for 1st div in Header ------------------------------ */
.div-amazon-img {
    margin: 0 70px 0 20px;
}

.div-amazon-img a {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
}

.amazon-logo-large {
    width: 100px;
    height: 31;
    padding: 0 6px;
}

/* -------------------------------- CSS for 2nd div in Header ----------------------------- */
.div-search-bar {
    flex: 1;
    max-width: 950px;
}

.div-search-bar input {
    width: 100%;
    height: 70%;
    border: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    font-size: 18px;
    padding-left: 16px;
}

.div-search-bar input:focus{
    outline: 3px solid orange; /* Set input field's outline when focused*/
}


.div-search-bar button img {
    width: 22px;
    height: 22px;
}

.div-search-bar button {
    background-color: var(--search-button-color);
    height: 70%;
    border: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 0 15px;
}

/* -------------------------------- CSS for 3rd div in Header ------------------------------- */
.div-cart-order {
    margin-left: 30px;
    margin-right: 15px;
}

.div-order-and-return, .div-cart {
    display: flex;
    justify-content: center;
    align-items: center;
}

.div-order-and-return a{
    width: 100%;
    color: var(--header-text-color);
    padding: 0 7px;
}

.div-order-and-return .returns {
    font-size: 15px;
}

.div-order-and-return .orders {
    font-size: 17px;
    font-weight: bold;
}

.div-cart {
    width: 93px;
}

.div-cart a {
    height: 100%;
    width: 100%;
}

.div-cart img {
    width: 50px;
    height: 35px;
    position: absolute;
    padding: 6px;
}

.div-cart div {
    color: var(--cart-item-quantity-color);
    font-weight: bold;
    font-size: 16px;
    position: relative;
    top: 5px;
    left: 30px;
}

.div-cart p {
    color: var(--header-text-color);
    position: relative;
    top: 2px;
    left: 56px;
    font-weight: bold;
}

/* ----------------- CSS for header elements on small size screens --------------------- */
.amazon-logo-mobile {
    width: 34px;
    height: 35px;
    padding: 0 6px;
    display: none;
}

.hamburger-icon {
    display: none;
    cursor: pointer;
}


/* ----------------------------- CSS for sliding top bar ------------------------------- */
.top-bar {
    position: fixed;
    width: 100vw;
    z-index: 99;
    top: 0;
    transform: translateY(-100%); /* Initially hidden */
    background-color: var(--header-color);  
    padding: 10px 0;
    transition: transform 300ms ease-in-out; /* Using Transform to make transition smooth and faster */
}

.top-bar.show {
    transform: translateY(60px); /* Slides in */
}

.top-bar div{
    width: 100%;    
}

.top-bar a {
    width: 100%;
    text-decoration: none;
    color: var(--header-text-color);
    display: flex;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 0;
}

.top-bar a:hover {
    background-color: #25333e;
}

.top-bar span {
    color: var(--cart-item-quantity-color);
}