/* =========================================================
   HEADER (logo + search + identity) — responsive overrides
   Depends on Bootstrap grid and your existing components.
   ========================================================= */

/* Row tightening (so elements sit closer) */
.efl-header .header-lower .row {
    --bs-gutter-x: 1rem;
}

/* --- Logo --- */
.header-logo img {
    max-height: 56px;
    height: auto;
    width: auto;
}

@media (max-width: 575.98px) {
    .header-logo img {
        max-height: 48px;
    }
}

/* --- Search (container + pill + icon) --- */
.search-wrap {
    width: 100%;
    max-width: 100%;
}

    .search-wrap form.no-submit {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 8px 12px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 999px;
        box-shadow: 0 2px 10px rgba(0,0,0,.06);
        transition: border-color .2s, box-shadow .2s, background-color .2s;
        -webkit-tap-highlight-color: transparent;
    }

        .search-wrap form.no-submit:focus-within {
            border-color: #0a65a8;
            box-shadow: 0 0 0 4px rgba(10,101,168,.14);
        }

        .search-wrap form.no-submit::before {
            content: "";
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
            opacity: .65;
            background: no-repeat center / 18px 18px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23677385" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');
        }

    .search-wrap input[type="search"],
    #small-searchterms.no-submit[type="search"] {
        flex: 1 1 auto;
        width: 100%;
        height: 30px;
        line-height: 40px;
        border: none !important;
        outline: none;
        background: transparent !important;
        padding: 0 6px;
        font-size: 16px;
        color: #111827;
    }

        .search-wrap input[type="search"]::placeholder {
            color: #6b7280;
        }

        .search-wrap input[type="search"]::-webkit-search-cancel-button {
            -webkit-appearance: none;
            height: 16px;
            width: 16px;
            cursor: pointer;
            opacity: .75;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2399a1b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>') no-repeat center;
        }

/* --- Identity (username + cart + logout) --- */
.identity-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    padding-right: 10px;
}

    /* Username */
    .identity-bar .user-name {
        color: #0a65a8;
        font-weight: 600;
        white-space: nowrap;
        margin: 0 6px 0 4px;
    }

    /* Base icon tiles */
    .identity-bar .esh-identity-item,
    .identity-bar .logout-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        text-decoration: none;
        position: relative;
        transition: transform .2s, background .2s, box-shadow .2s, color .2s, border-color .2s;
    }

        .identity-bar .esh-identity-item i,
        .identity-bar .logout-btn i {
            font-size: 20px;
            line-height: 1;
        }

        /* Cart */
        .identity-bar .esh-identity-item.cart-btn {
            background: #0a65a8;
            color: #fff;
        }

            .identity-bar .esh-identity-item.cart-btn:hover {
                background: #004e84;
                transform: translateY(-1px);
                box-shadow: 0 6px 16px rgba(0,0,0,.18);
            }

    .identity-bar .cart-btn .cart-count {
        position: absolute;
        top: -8px;
        right: -6px;
        min-width: 20px;
        padding: 2px 6px;
        border-radius: 999px;
        background: #ff3b3b;
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        line-height: 1;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0,0,0,.25);
        z-index: 1;
    }

    /* Logout */
    .identity-bar .logout-btn {
        background: #fff;
        color: #0a65a8;
        border: 2px solid #0a65a8;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }

        .identity-bar .logout-btn:hover {
            background: #0a65a8;
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(0,0,0,.18);
        }

/* --- Responsive layout rules (logo | search | identity) --- */

/* Phones */
@media (max-width: 575.98px) {
    .identity-bar .user-name {
     /*   display: none;*/
    }

    .identity-bar .esh-identity-item, .identity-bar .logout-btn {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

        .identity-bar .esh-identity-item i, .identity-bar .logout-btn i {
            font-size: 18px;
        }

    .search-wrap form.no-submit {
        padding: 10px 14px;
    }

        .search-wrap form.no-submit::before {
            width: 20px;
            height: 20px;
            flex-basis: 20px;
            background-size: 20px 20px;
        }

    .search-wrap input[type="search"] {
        height: 44px;
        line-height: 44px;
        font-size: 16px;
    }
}

/* Tablets */
@media (min-width: 576px) and (max-width: 991.98px) {
    .search-wrap {
        max-width: 100%;
    }

        .search-wrap input[type="search"] {
            height: 42px;
            line-height: 42px;
        }
}

/* Desktops */
@media (min-width: 992px) {
    /* keep header compact and make search sit ~50px from the logo */
    .search-wrap {
        max-width: 560px;
        margin-left: 50px;
    }

        .search-wrap input[type="search"] {
            height: 40px;
            line-height: 40px;
        }
}

/* Wide desktops */
@media (min-width: 1400px) {
    .search-wrap {
        max-width: 640px;
    }
}

/* Styles for mobile screens */
@media (max-width: 767.98px) { /* Adjust the max-width breakpoint as needed */
    /* Layout the main row as a column flex container */
    .row.align-items-center.g-3.py-2

{
    display: flex;
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
    width: 100%; /* Ensure the row takes full width if needed */
}

/* Style for the direct children columns */
.row.align-items-center.g-3.py-2 > div[class*="col"] {
    width: 100%; /* Make columns take full width when stacked */
    padding-left: 0; /* Reset bootstrap padding if needed */
    padding-right: 0; /* Reset bootstrap padding if needed */
    /* Add any other necessary mobile styles for columns */
}


/* Target the specific columns and reorder them */

/* Login / Logout pill (appears first on mobile) */
.row.align-items-center.g-3.py-2 > .col-auto:last-of-type { /* Assuming the last .col-auto is the login/logout */
    order: 1;
    display: flex; /* Make this column a flex container */
    justify-content: center; /* Center content horizontally within the column */
    align-items: center; /* Center content vertically if needed, less relevant here with column layout */
    padding-left: 10px; /* Slight shift to the left */
    padding-right: 10px; /* Keep consistent padding on both sides */
    box-sizing: border-box; /* Include padding in the element's total width */
}

/* Logo (appears second on mobile) */
.row.align-items-center.g-3.py-2 > .col-auto:first-of-type { /* Assuming the first .col-auto is the logo */
    order: 2;
    /* The flex/alignment is handled by the parent .row */
}

/* Search (appears third on mobile) */
.row.align-items-center.g-3.py-2 > .col {
    order: 3;
    /* The flex/alignment is handled by the parent .row */
}

/* Adjust the logo image size within the logo column */
.row.align-items-center.g-3.py-2 > .col-auto:first-of-type img {
    max-width: 150px; /* Set the desired maximum width */
    height: auto; /* Maintain aspect ratio */
    max-height: none; /* Remove any max-height constraint */
}