/* Minification failed. Returning unminified contents.
(54,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary'
(59,28): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(415,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary'
(421,28): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(742,45): run-time error CSS1030: Expected identifier, found '>'
(742,65): run-time error CSS1031: Expected selector, found ')'
(742,65): run-time error CSS1025: Expected comma or open brace, found ')'
(1080,32): run-time error CSS1039: Token not allowed after unary operator: '-secondary'
(1084,32): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(1295,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary'
(2081,1): run-time error CSS1019: Unexpected token, found '}'
 */
.jps-header-row {
    width: 100%;
    background-color: #f0f0f0;
}

.jps-header-inline {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 15px; /* less height than before */
}

/* Wider search input */ 
.jps-search-group {
    width: 480px; /* up from 420px */
}

    .jps-search-group .form-control {
        height: 36px; /* down from 44px */
        border-radius: 4px 0 0 4px;
    }

.jps-search-btn {
    width: 36px;
    height: 36px;
    border-radius: 0 4px 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Buttons with slightly less vertical padding but more horizontal width */
.jps-btn-account,
.jps-btn-signout {
    height: 36px; /* same as search input */
    padding: 0 25px; /* reset top/bottom, keep left/right */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

@media (min-width: 991px) {
    .dropdown-header-nav {
        width: 170% !important
    }
}


/* Preserve your color vars */
.jps-btn-account {
    background-color: var(--secondary) !important;
    color: #fff !important;
}

.jps-btn-signout {
    background-color: var(--primary) !important;
    color: #fff !important;
}

/* 1. Shrink the base font-size for all header elements */
.jps-header-inline,
.jps-search-group .form-control,
.jps-search-btn,
.jps-btn-account,
.jps-btn-signout {
    font-size: 13px; /* adjust smaller as needed */
}

    /* 2. Increase space between “My Account” text and its caret */
    .jps-btn-account .caret {
        margin-left: 8px; /* bump this up or down for more/less gap */
    }

/* 1) make the whole bar a bit thinner, but keep some vertical breathing room */
.jps-header-inline {
    padding: 6px 15px; /* ↓ from 8px */
}

/* 2) widen the search and shrink its height slightly */
.jps-search-group {
    width: 748.8px; /* ↑ from 480px */
    margin-left: 10px;
    margin-right: 10px;
}

@media (max-width: 1050px) {
    /* 2) widen the search and shrink its height slightly */
    .jps-search-group {
        width: 600px; /* ↑ from 480px */
    }

}



    .jps-search-group .form-control {
        height: 32px; /* ↓ from 36px */
        font-size: 12px; /* smaller text */
    }

        .jps-search-group .form-control::placeholder {
            font-size: 14px!important;
        }

.jps-search-btn {
    width: 32px;
    height: 32px;
}

/* 3) make buttons match that 32px height and smaller font, with roomy sides */
.jps-btn-account,
.jps-btn-signout {
    height: 32px; /* same as search */
    padding: 0 20px; /* reset vertical padding, keep horizontal */
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* 4) extra gap between “My Account” text and its caret */
    .jps-btn-account .caret {
        margin-left: 6px; /* ↑ from default */
    }


.jps-header-row {
  background: linear-gradient(to right, #75B2DF, #037C53);
  padding: 7px;
}


/* 2) Make the search icon button match the white input box */
/* keep the dividing line and uniform height */
/* unified 32px height, white BG, single divider line */
.jps-search-group .form-control {
    background-color: #fff;
    border: 1px solid #ccc; /* all around… */
    border-right: none; /* …except the right edge */
    border-radius: 4px 0 0 4px; /* round only left corners */
    height: 32px;
    padding: 20px;
}

.jps-search-btn {
    background-color: #828488 !important;
    border: 1px solid #828488 !important; /* full border, including left edge */
    border-radius: 0 4px 4px 0; /* round only right corners */
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}


.jp-navbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    gap: 1.5rem; /* add consistent gap between each direct child */
}

.jp-navbar {
    position: relative;
}

    /* Gradient bottom border */
    .jp-navbar::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 100%;
        background: linear-gradient(to right, transparent, #B70E0C 50%);
        z-index: 2;
    }


.jp-navbar__title h1 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.2;
    color: #005ea5;
    font-weight: bold;
}


/*.jp-navbar__menu {
    display: flex;
    flex: 1;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 5.2rem;*/ /* increase spacing between menu items */
/*}*/

    .jp-navbar__menu li {
        margin: 0; /* let gap do the work */
    }

        .jp-navbar__menu li a {
            font-size: 0.85rem;
            color: #005ea5;
            text-decoration: none;
            padding: 0.5rem 0;
        }

.jp-navbar__logo {
    height: 30px; /* keeps logos compact */
    width: auto;
}

.jp-navbar__logo-right {
    display: flex;
    align-items: center;
}

.jp-navbar__logo-left .jp-navbar__logo {
    height: 50px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.jp-navbar__logo-right .jp-navbar__logo {
    height: 80px;
}


/* Enable hover behavior */
.hover-dropdown:hover > .dropdown-menu {
    display: block;
}

/* Optional: smooth hover behavior */
.hover-dropdown .dropdown-menu {
    margin-top: 0; /* prevent jump */
    display: none;
}

/* Make sure parent is relative */
.hover-dropdown {
    position: relative;
}




/* Menu container stays flex but no extra reserved padding */
.jp-navbar__menu-wrap {
    flex: 1;
}

/* Left‐align menu, with tighter (but still generous) gaps */
.jp-navbar__menu {
    display: flex;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}




    /* Button text styling unchanged */
    .jp-navbar__menu li a {
        font-size: 12px;
        color: #005ea5;
        text-decoration: none;
        padding: 0.5rem 0;
        font-family: Montserrat;
        font-weight: 600;
    }

        .jp-navbar__menu li a:hover {
            background-color: transparent !important;
            color: #1c7ed6 !important;
        }



/* keep your dropdown icon styling */
.toggle-icon {
    margin-left: 0.25rem;
    font-size: 0.6rem;
}

@media (min-width: 1800px) {
    .jp-navbar__menu {
        display: flex;
        justify-content: space-evenly;
        gap: 0.2%;

    }
        .jp-navbar__menu li a {
            font-size: 14px;
        }

}


@media (max-width: 1799px) {
    .jp-navbar__menu {
        gap: 0rem;
        display: flex;
        justify-content: space-evenly;
    }
}

/*@media (max-width: 1250px) {
    .jp-navbar__menu {
        width: 100%;
    }
}*/

/*
@media (max-width: 1700px) {
    .jp-navbar__menu {
        gap: 2rem;
    }
}

@media (max-width: 1600px) {
    .jp-navbar__menu {
        gap: 1rem;
    }
}

@media (max-width: 1518px) {
    .jp-navbar__menu {
        gap: 1rem;
    }
}

@media (max-width: 1440px) {
    .jp-navbar__menu {
        gap: 0rem;
    }
}

@media (max-width: 1360px) {
    .jp-navbar__menu {
        gap: 0rem;
    }
}*/


@media (max-width: 1362px) {
    .jp-navbar__logo-right .jp-navbar__logo {
        height: 50px;
    }

    .jp-navbar__logo-left .jp-navbar__logo {
        height: 30px;
    }
}

@media (max-width: 1232px) {

    .jp-navbar__menu li a {
        font-size: 10px;
    }
}

@media (max-width: 1148px) {

    .jp-navbar__logo-right {
        margin-right: 0px;
    }
}



@media (max-width: 1128px) {

    .jp-navbar__logo-right .jp-navbar__logo {
        height: 30px;
    }

    .jp-navbar {
        gap: 0.5rem;
    }
}


/* Shared button sizing & typography */
.jps-btn-register,
.jps-btn-signin,
.jps-btn-browse,
.jps-btn-sell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px; /* matches your other header buttons */
    padding: 0 20px; /* roomy horizontal padding */
    font-size: 12px; /* same small, bold text */
    font-weight: bold;
    color: #fff !important; /* white text */
    border-radius: 4px;
    text-decoration: none;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

/* Green (secondary) for “Account-ish” actions */
.jps-btn-register,
.jps-btn-browse {
    background-color: var(--secondary) !important;
}

/* Blue (primary) for “Sign-in/out” actions */
.jps-btn-signin,
.jps-btn-sell {
    background-color: var(--primary) !important;
}

/* 1. Make jps-header-inline a flex row with centered items */
.jps-header-inline {
    display: flex;
    align-items: center;
}

    /* 2. Override the partial’s UL so its LIs sit inline, centred vertically */
    .jps-header-inline .nav.navbar-nav {
        align-items: center !important;
        margin: 0; /* remove Bootstrap’s default UL margins */
        padding: 0; /* remove Bootstrap’s default UL padding */
    }

        /* 3. Give each LI a bit of breathing room */
        .jps-header-inline .nav.navbar-nav > li {
            list-style: none;
        }

/* 4. Reset Bootstrap .btn styles and apply your jps-btn rules */
.jps-btn-account,
.jps-btn-register,
.jps-btn-signin,
.jps-btn-signout {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 32px !important;
    padding: 0 20px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    color: #fff !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 4px !important;
}

/* 5. Color-code */
.jps-btn-account,
.jps-btn-register {
    background-color: #13835e !important; /* green */
}

.jps-btn-signin,
.jps-btn-signout {
    background-color: #365692 !important; /* blue  */
}

/* 6. Caret spacing */
.jps-btn-account .caret {
    margin-left: 6px;
}


/* show only on xs/sm per Bootstrap3 */
@media (max-width: 991px) {


    .hidden-xs {
        display: none !important;
    }
}

/* mobile header container */
.mobile-header {
    background: #fff;
}

/* flex row: toggle, search, icons */
.mobile-header__top {
    display: flex;
    align-items: center;
}

/* hamburger styling */
.mobile-header__toggle {
    border: none;
    background: transparent;
    padding: 6px;
    margin-right: 8px;
}

    .mobile-header__toggle .icon-bar {
        background-color: #355591;
        width: 25px;
        height: 3px;
    }


/* search input group takes up remaining space */
.mobile-header__search {
    flex: 1;
}

    .mobile-header__search .form-control {
        height: 32px;
    }

.mobile-header__search-btn {
    height: 32px;
    width: 36px;
    padding: 0;
}

/* icon buttons */
.mobile-header__icons {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.mobile-header__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: 4px;
    color: #fff !important;
    border-radius: 4px;
}

    .mobile-header__icon-btn .glyphicon {
        font-size: 16px;
    }

/* collapsed nav menu */
.mobile-header__menu {
    padding-top: 8px;
}

    .mobile-header__menu .nav > li > a {
        padding: 8px 12px;
        font-size: 14px;
        color: #005ea5;
    }

    .mobile-header__menu .nav .dropdown-menu {
        position: static;
        display: none;
        margin: 0;
        border: none;
        box-shadow: none;
    }

    .mobile-header__menu .nav > li.open > .dropdown-menu {
        display: block;
    }


@media (max-width: 991px) {
    .jp-navbar {
        display: none;
    }

    .mobile-header {
        display: block;
    }
}

/* Row 1: Logos bigger & stretched */
.mobile-header__row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-header__logo-left,
.mobile-header__logo-right {
    height: 55px; /* up from 40px */
    width: auto;
}
/* Red line full width */
.mobile-header__redbar {
    height: 4px;
    background: linear-gradient(to right, #75B2DF 0%, #75B2DF 25%, #B70E0C 100%);
    margin: 0;
}

/* Row 2: Title + icons */
.mobile-header__row2 {
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 8px 8px;
}

.mobile-header__title {
    color: #005ea5;
    font-size: 15px;
    line-height: 1.2;
    font-weight: bold;
}

.mobile-header__icons {
    display: flex;
}

.mobile-header__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: 8px;
    border-radius: 4px;
    color: #fff !important;
    text-decoration: none;
}

.mobile-header__icon-account {
    background: #365692 !important;
}

.mobile-header__icon-logout {
    background: #13835e !important;
}

.mobile-header__icon-btn .bi {
    font-size: 16px;
}

.mobile-header__icon-register {
    background: #13835e !important;
}

.mobile-header__icon-signin {
    background: #365692 !important;
}

.Mobile_Header_NavButtons {
    padding: 5px;
}


@media (max-width: 357px) {
    .Mobile_Header_NavButtons {
        font-size: 14px;
        padding: 5px;
    }
}

@media (max-width: 333px) {
    .Mobile_Header_NavButtons {
        padding: 5px;
        font-size: 9px;
    }
}

/* Row 3: Hamburger + wide, thick search */
.mobile-header__row3 {
    display: flex;
    align-items: center;
    background: linear-gradient(to right, #75B2DF, #037C53);
    padding: 8px;
}

.mobile-header__toggle {
    border: none;
    background: white;
    padding: 12px;
    margin-right: 8px;
    margin-left: 5px
}

.mobile-header__search {
    height: 48px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin-left: 5px;
}

    .mobile-header__search .form-control {
        height: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 16px !important;
        font-size: 16px;
        box-shadow: none !important;
    }

.mm_widthfix {
    width: 80%;
}

@media (max-width: 412px) {

    .mobile-header__search .form-control::placeholder {
        font-size: 12px !important;
    }
}



    .mobile-header__search .input-group-btn .btn {
        height: 100% !important;
        border-radius: 0 !important;
        background: #828488;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        color: white;
    }

.tablet-usercontrol ul.nav {
    display: flex !important;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}


    /* first hide everything… */
    .tablet-usercontrol ul.nav > nav-link {
        display: none;
    }
        /* …then show only the <li> that has a child <a> with .jps-btn-account or .sign-in-out */
        .tablet-usercontrol ul.nav > li:has(> a.jps-btn-register),
        .tablet-usercontrol ul.nav > li:has(> a.jps-btn-signin)
        .tablet-usercontrol ul.nav > li:has(> a.jps-btn-account) {
            display: block !important;
        }



@media (min-width: 500px) and (max-width: 991px) {
    .logofftablet {
        display: block !important;
    }

    jps-btn-account {
        display: flex !important;
    }

    .signintablet {
        display: block!important;

    }
    dropdown {
        display: flex !important;
    }
}

.tablet-usercontrol .dropdown {
    position: relative !important;
}

.tablet-usercontrol .dropdown-menu.myaccount__dropdown {
    position: absolute !important;
    top: 100% !important; 
    left: auto !important;
    right: 0 !important; 
    margin-top: 0.25rem !important; 
}


.tablet-usercontrol ul.nav {
    display: flex !important;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}



.mobile-header__search-btn .mgmm {
    font-size: 12px;
}


.mobile-header__menu {
    padding: 0 8px 8px;
}

    .mobile-header__menu .nav > li > a {
        padding: 10px;
        font-size: 14px;
        color: #005ea5;
    }
/*.mobile-header__menu .nav .collapse {
  padding-left: 15px;
}*/

@media (min-width: 500px) {
    .navbar-toggle {
        display: block !important;
        background-color: white;
    }
}

@media (min-width: 991px) {
    .navbar-toggle {
        display: none !important;
    }
}


/* 1) Hide the mobile header by default */
.mobile-header {
    display: none !important;
}

/* 2) Only show it (and hide the desktop nav) on viewports ≤500px */
@media (max-width: 500px) {
    .mobile-header {
        display: block !important;
    }

    .jp-navbar {
        display: none !important;
    }
}

/* 3) You can still keep your tiny‐phone scaling rules under 500px */
@media (max-width: 500px) {

    /* make burger bars white */

    /* logos */
    .mobile-header__logo-left,
    .mobile-header__logo-right {
    }
    /* icons */
    .mobile-header__icon-btn {
        width: 55px;
        height: 40px;
    }

    mobile-header__search {
        width: 75%;
    }

    .mobile-header__icon-btn .bi {
        font-size: 20px;
    }
    /* title */
    .mobile-header__title {
        font-size: 20px;
    }
    /* search row */
    .mobile-header__search .form-control {
        height: 32px;
        font-size: 12px;
    }

    .mobile-header__search-btn {
        width: 40px;
        height: 30px;
    }
    /* tighten all row paddings */
    .mobile-header__row2,
    .mobile-header__row3 {
        padding: 12px 16px;
    }

    .mobile-header__search .form-control::placeholder {
        color: #828488;
        font-size: 14px;
    }
}

@media (max-width: 468px) {
    .mobile-header__logo-left, .mobile-header__logo-right {
        height: 45px;
        width: auto;
    }
}

@media (max-width: 397px) {
    .mobile-header__logo-left, .mobile-header__logo-right {
        height: 40px;
        width: auto;
    }
}

@media (max-width: 360px) {
    .mobile-header__logo-left, .mobile-header__logo-right {
        height: 35px;
        width: auto;
    }
}

@media (max-width: 320px) {
    .mobile-header__logo-left, .mobile-header__logo-right {
        height: 30px;
        width: auto;
    }
}

@media (max-width: 466px) {
    .mobile-header__title {
        font-size: 15px;
    }
}

@media (max-width: 404px) {
    .mobile-header__title {
        font-size: 12px;
    }

    .mobile-header__icon-btn {
        width: 50px;
        height: 35px;
    }
}

@media (max-width: 354px) {
    .mobile-header__title {
        font-size: 12px;
    }

    .mobile-header__icon-btn {
        width: 40px;
        height: 30px;
        margin-right: 2px;
    }
}

@media (max-width: 320px) {
    .mobile-header__title {
        font-size: 10px;
    }

    .mobile-header__icon-btn {
        width: 34px;
        height: 25px;
        margin-right: 0px;
    }
}

@media (max-width: 276px) {
    .mobile-header__title {
        font-size: 8px;
    }

    .mobile-header__icon-btn {
        width: 34px;
        height: 25px;
        margin-right: 0px;
    }
}


/* Hide tablet header by default */
.tablet-header {
    display: none !important;
}

/* Show ONLY between 501px and 991px */
@media (min-width: 501px) and (max-width: 991px) {
    /* hide desktop & mobile headers */

    /* in tablet‐header row2, push Register & SignIn to the right */
    .tablet-header__action-btn:first-of-type {
        margin-left: auto !important;
    }

    /* keep a small gap between Register and SignIn */
    .tablet-header__action-btn + .tablet-header__action-btn {
        margin-left: 8px !important;
    }

    nav nav-pills nav-stacked {
        display: block !important;
    }

    .jp-navbar,
    .mobile-header {
        display: none !important;
    }
    /* show tablet header */
    .tablet-header {
        display: block !important;
        background: #fff;
    }

    /* Row1: logos + title */
    .tablet-header__row1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
    }

    .tablet-header__logo-left,
    .tablet-header__logo-right {
        height: 40px;
        width: auto;
    }

    .tablet-header__title-text {
        flex: 1;
        margin: 0 16px;
        font-size: 1rem;
        line-height: 1.2;
        color: #005ea5;
        font-weight: bold;
        text-align: center;
    }

    /* Row2: toggle, search, register, signin */
    .tablet-header__row2 {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        background: linear-gradient(to right, #75B2DF, #037C53);
        border-top: 2px solid #B70E0C;
    }

    .tablet-header__toggle {
        background: none;
        border: none;
        font-size: 1.5rem;
        color: #005ea5;
        margin-right: 12px;
    }

    .tablet-header__search {
        flex: 1;
        display: flex;
    }

        .tablet-header__search .form-control {
            height: 36px;
            border-right: none;
        }

    .tablet-header__search-btn {
        width: 42px;
        height: 42px;
        border: 1px solid #828488;
        background: #828488;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tablet-header__action-btn {
        margin-left: 12px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        height: 36px !important;
        padding: 0 16px !important;
        font-size: 14px !important;
        font-weight: bold !important;
        color: #fff !important;
        border: none !important;
        border-radius: 4px !important;
        text-decoration: none !important;
    }

    .jps-btn-register.tablet-header__action-btn {
        background-color: var(--secondary) !important;
    }

    .jps-btn-signin.tablet-header__action-btn {
        background-color: var(--primary) !important;
    }

    /* Row3: collapsed menu styling */
    .tablet-header__menu {
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        border-top: 1px solid #ccc;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .tablet-header__menu-list {
        list-style: none;
        margin: 0;
        padding: 8px 0;
    }

        .tablet-header__menu-list > li > a {
            display: block;
            padding: 10px 16px;
            margin: 4px 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background: #f9f9f9;
            color: #005ea5;
            text-decoration: none;
            position: relative;
        }

            .tablet-header__menu-list > li > a .pull-right {
                position: absolute;
                right: 16px;
                top: 50%;
                transform: translateY(-50%);
            }

    .tablet-header__submenu {
        list-style: none;
        padding-left: 24px;
    }

        .tablet-header__submenu > li > a {
            background: none;
            border: none;
            padding: 6px 16px;
            margin: 2px 0;
        }

    /* Remove any background or border on the toggle */
    .tablet-header__toggle {
        background: none !important;
        border: none !important;
        padding: 0.25rem;
    }

        /* Force the list icon itself to be white */
        .tablet-header__toggle .bi-list {
            color: #fff !important;
            font-size: 1.5rem;
        }

        /* make burger bars white */
        .tablet-header__toggle .icon-bar {
            background-color: #fff !important;
            width: 25px;
            height: 3px;
        }

    .tablet-header__row2 {
        display: flex;
        align-items: center;
        padding: 8px 15px;
    }

    /* 1) make the search form flex-grow */
    .tablet-header__search-form {
        flex: 1;
    }

    /* 2) full-width input-group */
    .tablet-header__search-group {
        width: 100%;
    }

        /* 3) input and button styling */
        .tablet-header__search-group .form-control {
            border-radius: 4px 0 0 4px;
            height: 42px;
        }

    .tablet-header__search-btn {
        border-radius: 0 4px 4px 0;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 4) ensure .actions don’t stretch */
    .tablet-header__actions {
        display: flex;
        gap: 10px;
    }
}


@media (max-width: 600px) {

    .tablet-header__search-group .form-control::placeholder {
        font-size: 12px;
    }
}



/* ─── Small tablets (≤600px) ─── */
/*@media (max-width: 600px) {*/
/* Logos shrink */
/*.tablet-header__logo-left,
    .tablet-header__logo-right {
        height: 30px;*/ /* down from 40px */
/*}*/

/* Title text shrinks */
/*.tablet-header__title-text {
        font-size: 0.9rem;*/ /* down from 1rem */
/*}*/

/* Toggle icon size smaller */
/*.tablet-header__toggle .bi-list {
        font-size: 1.25rem;*/ /* down from 1.5rem */
/*}*/

/* Search input & button */
/*.tablet-header__search .form-control {
        height: 32px;*/ /* down from 36px */
/*font-size: 12px;
    }

    .tablet-header__search-btn {
        width: 40px;*/ /* down from 48px */
/*height: 32px;
    }*/

/* Action buttons (Register/Sign In) */
/*.tablet-header__action-btn {
        height: 32px !important;*/ /* down from 36px */
/*padding: 0 12px !important;*/ /* narrower sides */
/*font-size: 12px !important;*/ /* smaller text */
/*}*/

/* Row padding tighter */
/*.tablet-header__row1,
    .tablet-header__row2 {
        padding: 6px 12px;*/ /* less left/right padding */
/*}
}*/

/* ─── Extra‐small tablets (≤550px) ─── */
/*@media (max-width: 550px) {*/
/* Logos shrink more */
/*.tablet-header__logo-left,
    .tablet-header__logo-right {
        height: 25px;
    }*/

/* Title text smaller */
/*.tablet-header__title-text {
        font-size: 0.8rem;
    }*/

/* Burger icon smaller */
/*.tablet-header__toggle .bi-list {
        font-size: 1rem;
    }*/

/* Search input & button */
/*.tablet-header__search .form-control {
        height: 28px;
        font-size: 11px;
    }

    .tablet-header__search-btn {
        width: 36px;
        height: 28px;
    }*/

/* Register/Sign In buttons smaller */
/*.tablet-header__action-btn {
        height: 28px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
    }*/

/* Tighter row padding */
/*.tablet-header__row1,
    .tablet-header__row2 {
        padding: 4px 8px;
    }
}*/


.dropdown-menu .badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 0.25em 0.5em;
    background-color: var(--secondary) !important;
    color: #fff !important;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    float: right;
}


.dropdown-menu .badge,
.mobile-header__menu .badge,
.tablet-header__menu .badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 24px !important;
}




.dropdown-menu .badge,
.mobile-header__menu .badge,
.tablet-header__menu .badge {
    display: inline-block;
    vertical-align: middle;
    padding: 0.25em 0.5em !important;
    background-color: #13835e !important;
    color: #fff !important;
    border-radius: 0.25rem !important;
    font-size: 0.75rem !important;
}

@media (max-width: 500px) {

    .mobile-header__menu li {
        position: relative;
    }

    .mobile-header__menu .badge {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        float: none !important;
        width: auto !important;
        text-align: left !important;
        margin-right: 3px;
    }
}

@media (max-width: 991px) {
    .tablet-header__menu li {
        position: relative;
    }

    /* anchor badges by their right edge */
    .tablet-header__menu .badge {
        position: absolute !important;
        left: auto !important; /* clear old left */
        right: 0 !important; 
        top: 50% !important;
        transform: translateY(-50%) !important;
        float: none !important;
        width: auto !important;
        text-align: left !important;
        margin-right: 3px;
    }
}



.dropdown-menu a,
.mobile-header__menu .nav > li > a,
.tablet-header__menu .nav > li > a {
    font-weight: 700;
    color: #0056b3 !important;
    font-size: 14px;
    line-height: 1.5;
    padding: 12px 16px;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
    color: #fff!important;
    text-decoration: none;
    background-color: #034db1;
    outline: 0;
}


    .dropdown-menu a:hover,
    .mobile-header__menu .nav > li > a:hover,
    .tablet-header__menu .nav > li > a:hover {
        background-color: rgba(0, 86, 179, 0.1);
        color: #003d80 !important;
    }



#categoriesSubmenu > li > a,
#tabletCategoriesSubmenu > li > a,
.dropdown-menu .dropdown-menu > li > a {
    font-size: 13px;
    padding-left: 32px;
}


.dropdown-menu a,
.mobile-header__menu .nav > li > a,
.tablet-header__menu .nav > li > a {
    transition: color 0.2s ease !important;
}



.dropdown-menu,
.mobile-header__menu,
.tablet-header__menu {
    min-width: 220px;
    width: 60%;
}

@media (max-width: 557px) {

    .dropdown-menu,
    .mobile-header__menu,
    .tablet-header__menu {
        min-width: 220px;
        width: 100%;
    }

    .tablet-header__row1 {
        padding: 4px 8px;
    }

    .tablet-header__logo-left,
    .tablet-header__logo-right {
        height: 40px;
    }

    .tablet-header__title-text {
        font-size: 14px;
        line-height: 1.2;
    }

    .tablet-header__row2 {
        padding: 6px 8px;
        gap: 8px;
    }

    .tablet-header__search-group {
        width: 100%;
    }

        .tablet-header__search-group .form-control {
            font-size: 12px;
        }

    .tablet-header__search-btn {
        width: 42px;
        height: 42px;
    }

    .tablet-header__actions {
        gap: 6px;
    }

        .tablet-header__actions a {
            padding: 4px 10px;
            font-size: 12px;
        }


    .tablet-header__menu .nav > li > a {
        font-size: 13px;
        padding: 8px 12px;
    }

    .tablet-header__actions .jps-btn-account,
    .tablet-header__actions .jps-btn-signout {
        padding: 4px 8px !important;
        font-size: 12px !important;
        min-width: 0 !important;
        white-space: nowrap;
    }
}


.dropdown-menu.myaccount__dropdown li {
    position: relative;
}

    .dropdown-menu.myaccount__dropdown li::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #f5f5f5;
        opacity: 0;
        transition: opacity .2s ease;
        z-index: -1;
        color: black;
    }

    .dropdown-menu.myaccount__dropdown li:hover::before {
        opacity: 1;
    }

    .dropdown-menu.myaccount__dropdown li > a {
        position: relative;
        z-index: 1;
        display: block;
    }


@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu {
        position: absolute !important;
        box-shadow: 0 6px 12px rgba(0, 0, 0, .175) !important;
        background-color: #fff !important;
    }
}

@media (max-width: 559px) {
    .navbar-nav .open .dropdown-menu {
        position: absolute !important;
        box-shadow: 0 6px 12px rgba(0, 0, 0, .175) !important;
        background-color: #fff !important;
        min-width: 180px !important;
    }
}


/* Layout for the icon container */
.jp-navbar__social-icons {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* align left within its div */
    gap: 12px; /* nice even spacing between icons */
    margin-right: 20px; /* optional space from John Pye logo */
}

    /* Optional: shrink icons slightly and remove underline */
    .jp-navbar__social-icons a {
        font-size: 16px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }

    /* Brand colors */
    .jp-navbar__social-icons .bi-facebook {
        color: #1877f2;
    }

    .jp-navbar__social-icons .bi-twitter-x {
        color: #000000;
    }

    .jp-navbar__social-icons .bi-instagram {
        color: #e1306c;
    }

    .jp-navbar__social-icons .bi-tiktok {
        color: #000000;
    }

    .jp-navbar__social-icons .bi-youtube {
        color: #ff0000;
    }

    /* Optional hover dim */
    .jp-navbar__social-icons a:hover {
        opacity: 0.75;
    }



.jps-category-button {
    position: relative;
    display: inline-block;
}

.jps-category-trigger {
    height: 32px;
    padding: 0 12px;
    background-color: #ffffff;
    color: #355591;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 0 0 1px #ccc;
    transition: background-color 0.2s ease;
    font-family: Montserrat;
    font-weight: 600;
    height: 42px;
}

    .jps-category-trigger:hover {
        background-color: #f7f7f7;
    }

    .jps-category-trigger i {
        font-size: 20px;
    }

.jps-category-button .dropdown-menu {
    top: 100%;
    left: 0;
    z-index: 999;
    border-radius: 0 0 6px 6px;
}

.jps-category-trigger i.toggle-icon {
    font-size: 16px;
    line-height: 1;
    margin-left: 8px; /* increase this for more gap */
}

.jps-category-trigger .bi-list {
    color: #355591 !important;
}

.LogOffButtonMal {

    padding: 20px!important;
}

.mobile-header__row1.combined-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* NOT center! */
    width: 100%;
}



.mobile-header__left {
    display: flex;
    align-items: center;
}

.mobile-header__logo-left {
    height: 80px;
}

.mobile-header__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding: 10px;
    box-sizing: border-box;
}


/* JP Logo Styling */
.mobile-header__logo-right {
    width: 70%;
    height: auto;
    display: block;
}

/* Button Styling */
.mobile-header__icon-btn {
    padding: 6px 14px;
    font-size: 0.9rem;
    border-radius: 8px;
    background-color: #2e5aa7;
    color: white;
    border: none;
    text-decoration: none;
    margin-top: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s;
    align-self: flex-end; /* Ensure it stays right-aligned inside the column */
}

.mobile-header__icon-btn {
    align-self: flex-end;
    white-space: nowrap;
    width: fit-content;
  }

    /* Optional: Hover style */
    .mobile-header__icon-btn:hover {
        background-color: #1e4787;
    }




/*   @media (max-width: 375px) {
        .mobile-header__logo-left {
            height: 70px;
        }
    }

@media (max-width: 355px) {
    .mobile-header__logo-right {
        width: 75%;
    }

    .mobile-header__icon-btn {
        width: 75%;
        font-size: 0.7em;
    }

    .mobile-header__logo-left {
        height: 65px;
    }
}

@media (max-width: 345px) {
    .mobile-header__logo-right {
        width: 68%;
    }

    .mobile-header__icon-btn {
        width: 68%;
        font-size: 0.7em;
    }

    .mobile-header__logo-left {
        height: 60px;
    }
}

@media (max-width: 333px) {
    .mobile-header__logo-right {
        width: 65%;
    }

    .mobile-header__icon-btn {
        width: 65%;
        font-size: 0.6em;
    }

    .mobile-header__logo-left {
        height: 55px;
    }
}*/

@media (max-width: 356px) {

    .mobile-header__logo-left {
        height: 70px;
    }
}

@media (max-width: 334px) {

    .mobile-header__logo-left {
        height: 60px;
    }
}

@media (max-width: 312px) {

    .mobile-header__logo-left {
        height: 50px;
    }
}


    @media (max-width: 312px) {

        .mobile-header__logo-left {
            height: 45px;
        }
    }

@media (max-width: 312px) {

    .mobile-header__logo-left {
        height: 40px;
    }
}


    @media (max-width: 268px) {

        .mobile-header__logo-left {
            height: 30px;
        }

        .mobile-header__logo-right {
            width: 75%;
        }


    }


@media (max-width: 412px) {

    .mobile-header__icon-btn {
        font-size: 12px;
    }
}

@media (max-width: 386px) {

    .mobile-header__icon-btn {
        width: 90%;
    }
}


/* Base styling (bootstrap override if needed) */
.mobile-header__toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px auto;
}

/* When active, flip layout to upright bars */
.mobile-header__toggle.active {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

    .mobile-header__toggle.active .icon-bar {
        width: 2px;
        height: 20px;
        transform: rotate(0deg);
        margin: 0 3px;
    }


@media (max-width: 1500px) {
    .jp-navbar__social-icons {
        font-size: 10px;
        gap: 6px !important;
    }

        .jp-navbar__social-icons a {
            font-size: 12px;
        }

        .jp-navbar__menu li {
            font-size: 14px;
        }

    .jp-navbar__title h1 {
        font-size: 1rem;
    }
}

@media (max-width: 1209px) {
    .jp-navbar__title h1 {
        font-size: 0.9rem;
    }

}

@media (max-width: 1162px) {
    
}

@media (max-width: 367px) {
    #FullTextQuery::placeholder {
        font-size: 10px;
    }

    /* Vendor prefixes for broader browser support */
    #FullTextQuery::-webkit-input-placeholder {
        font-size: 10px;
    }

    #FullTextQuery:-moz-placeholder {
        font-size: 10px;
    }

    #FullTextQuery::-moz-placeholder {
        font-size: 10px;
    }

    #FullTextQuery:-ms-input-placeholder {
        font-size: 10px;
    }
}

@media (max-width: 319px) {
    #FullTextQuery::placeholder {
        font-size: 8px;
    }

    /* Vendor prefixes for broader browser support */
    #FullTextQuery::-webkit-input-placeholder {
        font-size: 8px;
    }

    #FullTextQuery:-moz-placeholder {
        font-size: 8px;
    }

    #FullTextQuery::-moz-placeholder {
        font-size: 8px;
    }

    #FullTextQuery:-ms-input-placeholder {
        font-size: 8px;
    }
}

@media (max-width: 1115px) {
    .jps-search-group {
        width: 520px;
    }
}

@media (max-width: 1171px) {
    .jps-search-group {
        width: 560px;
    }
}

.dropdown-item {
    display: block;
}

@media (max-width: 999px) {
    /* --- Mobile filter/sort layout --- */
    .mobile-filter-sort {
        display: flex;
        gap: 8px;
        align-items: stretch;
        justify-content: space-between;
    }

        .mobile-filter-sort .btn-group {
            width: 40%;
        }

            .mobile-filter-sort .btn-group .btn {
                width: 100%;
                margin-bottom: 10px
            }

    /* --- "Show entries" centering --- */
    .show-count-center .dataTables_length {
        display: inline-block;
    }

    .show-count-center label {
        display: flex;
        align-items: center;
        gap: 8px;
        justify-content: center;
        margin: 0;
        width: 100%;
    }

    .show-count-center select.form-control {
        display: inline-block;
        width: 120px;
    }

    /* --- Sort menu: scrollable --- */
    .sort-dropdown .dropdown-menu {
        max-height: 60vh;
        overflow-y: scroll; /* keep scrollbar visible */
        -webkit-overflow-scrolling: touch;
    }

    /* --- Centered floating scroll indicator (no backdrop) --- */
    .sort-dropdown .scroll-indicator {
        position: sticky;
        bottom: 10px;
        display: flex;
        justify-content: center;
        z-index: 10;
        pointer-events: none; /* container inert */
    }

    .sort-dropdown .scroll-indicator__inner {
        pointer-events: auto; /* row is clickable */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        cursor: pointer;
    }

    .sort-dropdown .scroll-indicator__label {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.3px;
        user-select: none;
        text-transform: uppercase;
        text-align: center;
        /* stronger gradient + deeper colors */
        background: linear-gradient( 120deg, #2b4376 0%, #365692 30%, #4a78c0 50%, #365692 70%, #2b4376 100% );
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        /* animation for shimmer */
    }

    /* Shimmer circular button (clickable) */
    .sort-dropdown .scroll-indicator__btn {
        pointer-events: auto; /* IMPORTANT: allow clicks */
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        box-shadow: 0 4px 14px rgba(0,0,0,0.25);
        transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
        background: linear-gradient(120deg, #365692 0%, #365692 40%, #4a78c0 50%, #365692 60%, #365692 100%);
        background-size: 200% 100%;
        animation: waveShimmer 4s linear infinite;
    }

        .sort-dropdown .scroll-indicator__btn:hover {
            transform: scale(1.08);
            box-shadow: 0 6px 18px rgba(0,0,0,0.30);
        }

        .sort-dropdown .scroll-indicator__btn:focus {
            outline: 2px solid #92a9d6;
            outline-offset: 2px;
        }

    /* Hide indicator when JS toggles it */
    .sort-dropdown .scroll-indicator.is-hidden {
        display: none;
    }

    /* --- Optional: neat scrollbar (WebKit/Blink) --- */
    .sort-dropdown .dropdown-menu::-webkit-scrollbar {
        width: 8px;
    }

    .sort-dropdown .dropdown-menu::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .sort-dropdown .dropdown-menu::-webkit-scrollbar-thumb {
        background: #bbb;
        border-radius: 4px;
    }

        .sort-dropdown .dropdown-menu::-webkit-scrollbar-thumb:hover {
            background: #999;
        }

    /* --- Section titles --- */
    .sort-dropdown .dropdown-header,
    .sort-dropdown .menu-section-title {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: #333;
        padding: 8px 16px;
        margin: 0;
        border-bottom: 1px solid #eee;
    }

    /* --- Keyframes --- */
    @keyframes waveShimmer {
        0% {
            background-position: 0% 0%;
        }

        100% {
            background-position: 200% 0%;
        }
    }
}





@media (max-width: 355px) {
    .lot-filter .dataTables_length label {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        flex-wrap: nowrap;
    }
}


@media (min-width: 501px) and (max-width: 991px) {
    .lot-filter {
        padding: 12px;
    }

        .lot-filter select,
        .lot-filter input[type="text"],
        .lot-filter button {
            width: 100% !important;
            font-size: 15px;
            margin-bottom: 12px;
            box-sizing: border-box;
        }

    .table-filters .watchlist-filter {
        order: -1;
        width: 100%;
        margin-bottom: 12px;
    }

    .lot-filter .table-filters .row > div,
    .lot-filter .table-filters .row {
        margin: 0;
        padding: 0;
    }

    .lot-filter #lotsTableAjax_filter label {
        display: block;
        width: 100%;
    }

        .lot-filter #lotsTableAjax_filter label::before {
            content: none !important;
        }

        .lot-filter #lotsTableAjax_filter label > span {
            display: none;
        }

    .lot-filter #lotsTableAjax_filter input[type="search"] {
        width: 80%;
        font-size: 15px;
        margin-bottom: 12px;
    }

    .table-filters .show-count {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 12px;
    }

        .table-filters .show-count label,
        .table-filters .show-count span {
            font-size: 14px;
            margin-bottom: 4px;
        }

        .table-filters .show-count select {
            width: 100%;
            font-size: 14px;
        }

    .table-filters button,
    .clear-filters button,
    .toggle-watchlist-filter {
        width: 100%;
        font-size: 15px;
        margin-bottom: 12px;
    }

    .lot-filter .dataTables_length label {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        flex-wrap: nowrap;
    }

    .lot-filter .dataTables_length select {
        width: auto;
        min-width: 60px;
    }

    .table-filters .watchlist-filter button,
    .table-filters .clear-filters button,
    .table-filters .show-count select {
        width: 100%;
        font-size: 15px;
        text-align: center;
    }
}

@media (max-width: 1454px) {
    .jp-navbar__logo-left .jp-navbar__logo {
        height: 40px;

    }
}

@media (max-width: 1318px) {
    .jp-navbar__title h1 {
        font-size: 0.8rem;
    }
}

@media (max-width: 1288px) {
    .jp-navbar__logo-left .jp-navbar__logo {
        height: 30px;
    }
}

@media (max-width: 1033px) {
    .jp-navbar__title h1 {
        font-size: 0.6rem;
    }
}