/* ================================================================
   BII WHITE HEADER – complete rewrite, clean slate
   Nav row is now INSIDE main-menu (bii-nav-row), not in bottom-part.
   ================================================================ */

/* ---------- Base background ---------- */
.bii-white-header,
.bii-white-header.header-style-5,
.bii-white-header.header-style-5.color-style,
.bii-white-header .mobile-fix-option {
    background: #ffffff !important;
}

/* The Bootstrap container inside the header keeps its normal width */
.bii-white-header > .container {
    padding: 0 12px;
}

/* ---------- White card – overflow:visible so sidebar dropdown is never clipped ---------- */
.bii-white-header .main-menu {
    background: #ffffff !important;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.13);
    display: block !important;
    width: 100% !important;
    padding: 0;
    margin-top: 10px;
    overflow: visible !important;
    border: 0 !important;
    position: relative;
}

/* Shell is a vertical flex column – position:relative lets sidebar anchor here */
.bii-white-header .bii-header-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0;
    position: relative;
    overflow: visible !important;  /* never clip the sidebar or its sub-menus */
}

/* ---------- Top black strip ---------- */
.bii-white-header .bii-top-meta-row {
    background: #000000;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 28px;
    width: 100%;
    border-radius: 14px 14px 0 0;
}

.bii-white-header .bii-top-meta-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    direction: rtl;
    align-items: center;
    gap: 20px;
}

.bii-white-header .bii-top-meta-links li a {
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.bii-white-header .bii-top-meta-links li a:hover {
    opacity: 0.8;
}

/* ---------- Logo + Search row ---------- */
.bii-white-header .bii-brand-search-row {
    display: flex;
    align-items: center;
    direction: rtl;
    gap: 18px;
    padding: 0px 28px 0px;
    width: 100%;
}

.bii-white-header .menu-left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bii-white-header .brand-logo img {
    max-height: 72px;
    width: auto;
    display: block;
}

.bii-white-header .bii-header-search {
    flex: 1;
    min-width: 0;
}

.bii-white-header .form_search {
    position: relative;
    width: 100%;
    display: block;
}

.bii-white-header .form_search .nav-search {
    height: 56px;
    border-radius: 28px;
    border: 1.5px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
    background: #ffffff;
    font-size: 17px;
    padding-inline-start: 22px;
    padding-inline-end: 60px;
    width: 100%;
}

.bii-white-header .form_search .btn-search {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 8px;
    border: 0;
    background: #ffffff !important;
    color: #1e4ea9 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bii-white-header .form_search .btn-search i {
    font-size: 20px;
}

/* ---------- Nav row (inside the card) ---------- */
.bii-white-header .bii-nav-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    gap: 12px;
    padding: 0 28px 16px;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
}

/* Category toggle button */
.bii-white-header .bii-cat-btn {
    background: #000000 !important;
    border-radius: 20px;
    color: #ffffff !important;
    height: 36px;
    padding: 0 16px;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
    border: 0;
}

.bii-white-header .bii-cat-btn h5 {
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

.bii-white-header .bii-cat-btn .sidebar-bar {
    color: #ffffff !important;
    font-size: 14px;
}

/* Nav pill list */
.bii-white-header .bii-nav-pills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.bii-white-header .bii-nav-pills li a {
    background: #000000;
    color: #ffffff;
    border-radius: 20px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    height: 36px;
    white-space: nowrap;
    line-height: 1;
}

.bii-white-header .bii-nav-pills li a:hover {
    background: #333333;
    color: #ffffff;
}

/* ---------- Hide old / duplicate elements ---------- */
.bii-white-header .bii-main-menu-row,
.bii-white-header .top-header,
.bii-white-header .icon-nav,
.bii-white-header .header-options {
    display: none !important;
}

/* ---------- bottom-part: hide nav, keep sidebar ---------- */
.bii-white-header .bottom-part {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0;
    overflow: visible;
}

.bii-white-header .bottom-part .container,
.bii-white-header .bottom-part .row,
.bii-white-header .bottom-part .col-xl-3 {
    background: transparent !important;
    padding: 0;
    margin: 0;
    border: 0 !important;
    box-shadow: none !important;
}

/* Hide category menu toggle (old) and nav columns */
.bii-white-header .category-menu,
.bii-white-header .main-nav-center,
.bii-white-header .col-xxl-2.d-none {
    display: none !important;
}

/* Desktop: sidebar drops below the white card, right-aligned, fixed width */
.bii-white-header .marketplace-sidebar {
    display: none;              /* hidden until JS slideToggle */
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    width: 260px !important;    /* narrow column – mega-menu panels open to the left */
    z-index: 9999 !important;
    margin-top: 4px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.15);
    overflow: visible !important;   /* must be visible – SmartMenus sub-panels overflow */
}

/* Transparent helpers – kill any gray from the old theme */
.bii-white-header .row,
.bii-white-header .col-sm-12,
.bii-white-header .col-xl-3,
.bii-white-header .col-xxl-7,
.bii-white-header .main-nav-center,
.bii-white-header .menu-right,
.bii-white-header .bii-header-search,
.bii-white-header .form_search,
.bii-white-header .bii-brand-search-row,
.bii-white-header .menu-left {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Kill gray typeahead / autocomplete suggestion backdrop */
.bii-white-header .typeahead__container,
.bii-white-header .typeahead__field,
.bii-white-header .typeahead__query,
.bii-white-header .tt-menu,
.bii-white-header .tt-dataset,
.bii-white-header .search-suggestion,
.bii-white-header .search-suggest-wrap {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* Hide empty typeahead */
.bii-white-header .typeahead__container:not(.result):not(.hint) .typeahead__list,
.bii-white-header .tt-menu:empty {
    display: none !important;
}


/* Override theme's aggressive 25px logo cap at small screens */
@media (max-width: 480px) {
    .bii-white-header .brand-logo img {
        height: auto !important;
        max-height: 60px !important;
        width: auto !important;
    }
}

/* ================================================================
   Mobile / tablet
   ================================================================ */
@media (max-width: 1199px) {
    .bii-white-header .main-menu {
        border-radius: 10px;
        margin-top: 0;
    }

    .bii-white-header .bii-top-meta-row {
        border-radius: 10px 10px 0 0;
        min-height: 24px;
        padding: 0 10px;
    }

    .bii-white-header .bii-top-meta-links li a {
        font-size: 12px;
    }

    .bii-white-header .bii-brand-search-row {
        padding: 2px 10px 4px;
        gap: 8px;
    }

    /* Override theme's 25px height limit on small screens */
    .bii-white-header .brand-logo img {
        height: auto !important;
        max-height: 64px !important;
        min-height: unset !important;
        width: auto !important;
    }

    .bii-white-header .form_search .nav-search {
        height: 40px;
        font-size: 14px;
    }

    .bii-white-header .form_search .btn-search {
        width: 30px;
        height: 30px;
        top: 5px;
    }

    .bii-white-header .bii-nav-row {
        display: none !important;
    }

    /* Mobile: sidebar stays in its original position and uses the theme's slide-in */
    .bii-white-header .marketplace-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: -280px !important;
        left: auto !important;
        width: 280px !important;
        height: 100vh !important;
        overflow-y: auto !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: -4px 0 16px rgba(0,0,0,0.2) !important;
        z-index: 9999 !important;
        display: block !important;   /* always in DOM; transition controls visibility */
        transition: right 0.4s ease;
    }

    .bii-white-header .marketplace-sidebar.open-side {
        right: 0 !important;
    }

    /* Hamburger icon – black on white card */
    .bii-white-header .bar-style .sidebar-bar,
    .bii-white-header #toggle-sidebar-res .sidebar-bar,
    .bii-white-header .bar-style i,
    .bii-white-header #toggle-sidebar-res i {
        color: #000000 !important;
        font-size: 22px;
    }

    .bii-white-header .bar-style {
        padding: 4px 6px;
        cursor: pointer;
    }
}

/* Mobile: logo + menu on first row, search below */
@media (max-width: 767px) {
    .bii-white-header .bii-top-meta-row {
        min-height: 22px;
        padding: 0 8px;
    }

    .bii-white-header .bii-brand-search-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 1px 8px 4px;
        gap: 6px;
    }

    .bii-white-header .menu-left {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    .bii-white-header .bii-header-search {
        width: 100%;
        flex: 0 0 100%;
        order: 2;
    }

    .bii-white-header .form_search {
        width: 100% !important;
    }
}

/* Desktop narrowing range: force search form to full available width */
@media (max-width: 1430px) {
    .header-style-5.color-style .form_search,
    .bii-white-header.header-style-5.color-style .form_search {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }
}

/* ================================================================
   Sticky header without layout jump
   Theme uses header.sticky { position: fixed }, which removes the
   header from flow and makes the page “jump”. We keep the header
   in flow with position: sticky instead.
   ================================================================ */
header#sticky-header.bii-white-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

header#sticky-header.bii-white-header.sticky,
header#sticky-header.bii-white-header.stickycls {
    position: -webkit-sticky !important;
    position: sticky !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    box-shadow: none;
}

/* Slightly stronger card shadow once JS adds .sticky (scroll) */
header#sticky-header.bii-white-header.sticky .main-menu,
header#sticky-header.bii-white-header.stickycls .main-menu {
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.16);
}