/* Single, clean site header (navbar.blade.php with $singleBar). Colours from admin theme (--primary*). */

#navbar { background: #fff; border-bottom: 1px solid #eef1f5; padding-top: 10px; padding-bottom: 10px; z-index: 1030; transition: box-shadow .2s; }
#navbar.sticky { box-shadow: 0 6px 24px rgba(15,23,42,.07); }
#navbar.nb-single > .container > .d-flex { gap: 12px; }

/* logo */
#navbar.nb-single .navbar-brand { width: auto !important; max-width: none !important; height: auto; margin: 0 !important; padding: 0; flex-shrink: 0; }
#navbar.nb-single .navbar-brand img { max-height: 44px !important; }

/* ---------- links ---------- */
@media (min-width: 992px) {
    #navbar .navbar-nav { gap: 2px; }
    #navbar .navbar-nav .nav-link { padding: 8px 12px !important; border-radius: 8px; font-size: 15px; font-weight: 500; color: #334155 !important; white-space: nowrap; transition: color .15s, background .15s; }
    #navbar .navbar-nav .nav-link:hover { color: var(--primary) !important; background: #f5f7fa; }
    #navbar .navbar-nav .nav-link.active { color: var(--primary) !important; font-weight: 600; }
    #navbar.nb-single #navbarContent { margin-left: 18px !important; margin-right: 0 !important; align-items: center; min-width: 0; }
    #navbar.nb-single .menu-category { margin-right: 6px; }
    #navbar.nb-single .navbar-nav > li.mr-lg-25 { margin-right: 8px !important; }
}

/* ---------- right cluster ---------- */
#navbar.nb-single .nav-icons-or-start-live { gap: 6px; flex-shrink: 0; }
#navbar .nb-search { position: relative; align-items: center; }
#navbar .nb-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
#navbar .nb-search .form-control { height: 40px; width: 210px; padding-left: 36px; border-radius: 10px; border: 1px solid #e2e8f0; background: #f8fafc; font-size: 14px; transition: border-color .15s, background .15s, width .2s; }
#navbar .nb-search .form-control:focus { width: 250px; background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }

/* cart + bell: reuse .top-navbar dropdown rules, neutralise its bar height */
#navbar .top-navbar { height: auto !important; border: 0 !important; background: transparent; }
#navbar .nb-icons { gap: 2px; }
#navbar .nb-icons .dropdown > button, #navbar .nb-icons .dropdown > a, #navbar .nb-icons .dropdown-toggle { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; border-radius: 10px; color: #475569; transition: background .15s; position: relative; }
#navbar .nb-icons .dropdown-toggle:hover { background: #f1f5f9; }
#navbar .nb-icons .dropdown-toggle svg { width: 20px !important; height: 20px !important; margin: 0 !important; }
#navbar .nb-icons .dropdown .badge { position: absolute; top: 3px; right: 3px; width: 17px !important; height: 17px !important; font-size: 10px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary) !important; color: var(--primary-btn-color, #fff); border: 2px solid #fff; }
#navbar .top-navbar .dropdown-menu { border: 1px solid #eef1f5; border-radius: 14px; box-shadow: 0 18px 44px rgba(15,23,42,.14); margin-top: 8px; }

/* user */
#navbar .nb-user .navbar-auth-user-dropdown { margin-left: 4px !important; }
#navbar .nb-user .navbar-user { padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid #e2e8f0; transition: background .15s; }
#navbar .nb-user .navbar-user:hover { background: #f8fafc; }
#navbar .nb-user .navbar-user img { width: 32px !important; height: 32px !important; object-fit: cover !important; }
#navbar .nb-user .navbar-user .user-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 8px !important; }
#navbar .nb-user .custom-dropdown-body { border-radius: 14px; border: 1px solid #eef1f5; box-shadow: 0 18px 44px rgba(15,23,42,.14); right: 0; left: auto; }

.nb-login { padding: 8px 12px; font-weight: 600; font-size: 15px; color: #334155; border-radius: 8px; }
.nb-login:hover { color: var(--primary); background: #f5f7fa; }

/* CTA */
#navbar .nav-start-a-live-btn.btn { height: 40px; padding: 0 18px; border-radius: 10px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; white-space: nowrap; margin-left: 4px; }

/* language / currency */
#navbar .nb-locale form, #navbar .nb-locale > div > div { margin: 0 !important; }
#navbar .nb-locale .mr-15.mx-md-20:empty { display: none; }
@media (min-width: 992px) { #navbar .nb-locale { margin-left: auto; padding-left: 10px; } }

/* ---------- categories ---------- */
@media (min-width: 992px) {
    #navbar .menu-category > ul > li { background: #f1f5f9; color: #1e293b; font-weight: 600; font-size: 15px; padding: 9px 16px 9px 12px; border-radius: 10px; align-items: center; white-space: nowrap; transition: background .15s, color .15s; }
    #navbar .menu-category > ul > li:hover, #navbar .menu-category > ul > li.show-items { background: #e8edf3; color: var(--primary); }
    #navbar .menu-category > ul > li > svg { margin-right: 8px !important; }

    #navbar .menu-category > ul > li .cat-dropdown-menu { min-width: 280px; padding: 8px; border-radius: 14px; border: 1px solid #eef1f5; box-shadow: 0 20px 50px rgba(15,23,42,.14); }
    #navbar .menu-category > ul > li .cat-dropdown-menu:after { display: none; }
    #navbar .menu-category > ul > li.show-items .cat-dropdown-menu, #navbar .menu-category > ul > li:hover .cat-dropdown-menu { top: calc(100% + 8px); }
    #navbar .menu-category > ul > li .cat-dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
    #navbar .cat-dropdown-menu > li { margin-bottom: 2px !important; }
    #navbar .cat-dropdown-menu > li > a { padding: 10px 12px !important; border-radius: 10px; color: #1e293b !important; font-weight: 500; transition: background .15s, color .15s; }
    #navbar .cat-dropdown-menu > li:hover > a { background: #f5f7fa; color: var(--primary) !important; }
    #navbar .cat-dropdown-menu > li > a svg { color: #94a3b8; }
    #navbar .cat-dropdown-menu-icon { width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 28px; object-fit: contain; }
    #navbar .cat-dropdown-menu > li .sub-menu { min-width: 240px; padding: 8px; border-radius: 14px; border: 1px solid #eef1f5; box-shadow: 0 20px 50px rgba(15,23,42,.14); top: -8px; }
    #navbar .cat-dropdown-menu > li:hover .sub-menu { left: calc(100% + 10px); }
    #navbar .cat-dropdown-menu > li .sub-menu::before { content: ""; position: absolute; top: 0; bottom: 0; left: -14px; width: 14px; }
    .rtl #navbar .cat-dropdown-menu > li:hover .sub-menu { left: auto; right: calc(100% + 10px); }
    #navbar .cat-dropdown-menu .sub-menu li { margin-bottom: 2px !important; }
    #navbar .cat-dropdown-menu .sub-menu li a { display: flex !important; align-items: center; width: 100%; padding: 9px 12px !important; border-radius: 8px; color: #334155 !important; }
    #navbar .cat-dropdown-menu .sub-menu li a:hover { background: #f5f7fa; color: var(--primary) !important; }
    #navbar .cat-dropdown-menu .sub-menu li a:after { display: none; }
}

/* laptops: tighten */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #navbar .navbar-nav .nav-link { padding: 8px 8px !important; font-size: 14px; }
    #navbar .menu-category > ul > li { padding: 8px 12px 8px 10px; font-size: 14px; }
    #navbar .nb-user .navbar-user .user-name { display: none; }
    #navbar .nb-user .navbar-user { padding: 3px; }
}

/* ---------- tablet & phone ---------- */
@media (max-width: 991.98px) {
    /* order: logo | icons | toggler */
    #navbar.nb-single .navbar-brand { order: 1 !important; margin-right: auto !important; }
    #navbar.nb-single .nav-icons-or-start-live { order: 2 !important; }
    #navbar.nb-single .navbar-toggler { order: 3 !important; }
    #navbar.nb-single .navbar-brand img { max-height: 38px !important; }

    #navbar .navbar-toggler { border: 1px solid #e2e8f0; border-radius: 10px; padding: 7px 9px; }
    #navbar .nb-user .navbar-user { padding: 2px; border: 0; }
    #navbar .nb-user .navbar-user .user-name { display: none; }

    /* drawer */
    #navbar .navbar-toggle-content { padding: 16px 18px 30px; overflow-y: auto; }
    #navbar .navbar-toggle-header { border-bottom: 1px solid #eef1f5; padding-bottom: 8px; margin-bottom: 12px; }
    #navbar .navbar-nav { align-items: stretch !important; }
    #navbar .navbar-nav > li { width: 100%; margin-right: 0 !important; }
    #navbar .navbar-nav .nav-link { padding: 12px 12px !important; border-radius: 10px; font-size: 16px; font-weight: 500; color: #1e293b !important; }
    #navbar .navbar-nav .nav-link.active { background: #f5f7fa; color: var(--primary) !important; }
    #navbar .menu-category > ul > li { background: #f5f7fa; padding: 12px; border-radius: 10px; font-weight: 600; margin-bottom: 6px; }
    #navbar .cat-dropdown-menu { padding: 8px 0 0 !important; background: transparent !important; }
    #navbar .cat-dropdown-menu > li { margin-bottom: 4px !important; }
    #navbar .cat-dropdown-menu .sub-menu { background: transparent !important; border-left: 2px solid #e2e8f0; border-radius: 0 !important; padding: 4px 0 4px 14px !important; margin: 4px 0 6px 6px; }

    .nb-drawer-extra { margin-top: 18px; padding-top: 18px; border-top: 1px solid #eef1f5; }
    #navbar .nb-drawer-extra .nb-search { display: flex; }
    #navbar .nb-drawer-extra .nb-search .form-control, #navbar .nb-drawer-extra .nb-search .form-control:focus { width: 100%; height: 46px; }
    .nb-drawer-auth { display: flex; gap: 10px; margin-top: 14px; }
    .nb-drawer-auth .btn { flex: 1; height: 46px; border-radius: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
    #navbar .nb-locale { margin-top: 16px; }

    /* small dropdowns become full-width sheets (existing rule) – keep icons compact */
    #navbar .nb-icons .dropdown > button, #navbar .nb-icons .dropdown-toggle { width: 38px; height: 38px; }
}

@media (max-width: 575.98px) {
    #navbar { padding-top: 8px; padding-bottom: 8px; }
    #navbar.nb-single > .container > .d-flex { gap: 6px; }
    #navbar.nb-single .navbar-brand img { max-height: 34px !important; max-width: 120px !important; }
}


/* ===== v3: calm modern bar (overrides above) ===== */
#navbar.nb-single { height: auto; padding-top: 0; padding-bottom: 0; background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid #f0f2f5; }
#navbar.nb-single > .container > .d-flex { min-height: 72px; }
#navbar.nb-single.sticky { box-shadow: 0 1px 0 #eef1f5, 0 8px 24px rgba(15,23,42,.05); }
#navbar.nb-single .navbar-brand img { max-height: 48px !important; }

@media (min-width: 992px) {
    /* Categories: light text button with chevron, no heavy box */
    #navbar.nb-single .menu-category > ul > li { background: transparent; color: #334155; font-weight: 500; font-size: 15px; padding: 8px 12px; border-radius: 999px; border: 1px solid #e5e9f0; }
    #navbar.nb-single .menu-category > ul > li:hover, #navbar.nb-single .menu-category > ul > li.show-items { background: #f7f9fb; color: var(--primary); border-color: #dbe1e8; }
    #navbar.nb-single .menu-category > ul > li > svg { width: 17px; height: 17px; color: var(--primary); }

    /* links: soft pill hover, small dot for active */
    #navbar.nb-single .navbar-nav .nav-link { font-size: 15px; font-weight: 500; color: #475569 !important; padding: 8px 14px !important; border-radius: 999px; }
    #navbar.nb-single .navbar-nav .nav-link:hover { color: #0f172a !important; background: #f4f6f9; }
    #navbar.nb-single .navbar-nav .nav-link.active { color: var(--primary) !important; background: color-mix(in srgb, var(--primary) 9%, #fff); font-weight: 600; }
}

/* uniform 40px controls on the right */
#navbar.nb-single .nb-search .form-control { height: 40px; width: 190px; border-radius: 999px; background: #f4f6f9; border-color: transparent; }
#navbar.nb-single .nb-search .form-control:focus { width: 240px; background: #fff; border-color: var(--primary); }
#navbar.nb-single .nb-icons .dropdown > button, #navbar.nb-single .nb-icons .dropdown > a, #navbar.nb-single .nb-icons .dropdown-toggle { border-radius: 999px; color: #475569; }
#navbar.nb-single .nb-icons .dropdown-toggle:hover, #navbar.nb-single .nb-icons .dropdown > a:hover { background: #f4f6f9; }
#navbar.nb-single .nb-login { height: 40px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; border: 1px solid #e5e9f0; font-size: 14px; font-weight: 600; color: #1e293b; }
#navbar.nb-single .nb-login:hover { border-color: var(--primary); color: var(--primary); background: #fff; }
#navbar.nb-single .nav-start-a-live-btn.btn { height: 40px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: none; }
#navbar.nb-single .nb-user .navbar-user { border-color: #e5e9f0; }
#navbar.nb-single .nav-icons-or-start-live { gap: 8px; }

@media (min-width: 992px) and (max-width: 1199.98px) {
    #navbar.nb-single .navbar-nav .nav-link { padding: 8px 9px !important; font-size: 14px; }
    #navbar.nb-single .menu-category > ul > li { padding: 7px 10px; font-size: 14px; }
}
@media (max-width: 991.98px) {
    #navbar.nb-single > .container > .d-flex { min-height: 62px; }
    #navbar.nb-single .navbar-brand img { max-height: 40px !important; }
    #navbar.nb-single .navbar-toggler { border-radius: 999px; width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
    #navbar.nb-single .navbar-toggler-icon { width: 20px; height: 20px; }
}
#navbar.nb-single .nb-auth { gap: 8px; }