/*
 * J-breeze public Liquid Glass header preview
 * Scope: only pages whose <body> has .jb-liquid-header-preview.
 * This lets JP Shopping / JP Shipping trial the treatment before it is made global.
 */

.jb-liquid-header-preview {
    --jb-header-glass: rgba(248, 251, 255, .70);
    --jb-header-glass-strong: rgba(248, 251, 255, .84);
    --jb-header-border: rgba(255, 255, 255, .82);
    --jb-header-line: rgba(126, 151, 183, .18);
    --jb-header-ink: #10233f;
    --jb-header-muted: #607189;
    --jb-header-blue: #235d9f;
    --jb-header-navy: #071a38;
    --jb-header-shadow: 0 18px 55px rgba(23, 46, 78, .14),
                        0 2px 10px rgba(23, 46, 78, .06);
}

.jb-liquid-header-preview .main-header-two {
    position: relative;
    z-index: 100;
    isolation: isolate;
}

/* Dark upper brand strip: richer and slightly translucent instead of flat navy. */
.jb-liquid-header-preview .main-header-two__top {
    position: relative;
    overflow: visible;
    background:
        radial-gradient(circle at 18% -35%, rgba(93, 159, 229, .20), transparent 42%),
        radial-gradient(circle at 84% 0%, rgba(255, 255, 255, .08), transparent 34%),
        linear-gradient(135deg, rgba(5, 21, 49, .98), rgba(8, 34, 70, .93) 58%, rgba(14, 47, 83, .91));
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
}

.jb-liquid-header-preview .main-header-two__top::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}

.jb-liquid-header-preview .main-header-two__top-details,
.jb-liquid-header-preview .main-header-two__top-details-inner {
    background: transparent !important;
}

.jb-liquid-header-preview .main-header-two__logo img {
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .16));
}

/* Main navigation becomes the primary floating glass surface. */
.jb-liquid-header-preview .main-menu-two__wrapper-inner {
    position: relative;
    overflow: visible;
    background:
        linear-gradient(135deg, rgba(255,255,255,.82), rgba(244,248,255,.64)) !important;
    border: 1px solid var(--jb-header-border);
    border-radius: 22px !important;
    box-shadow: var(--jb-header-shadow) !important;
    -webkit-backdrop-filter: blur(28px) saturate(185%);
    backdrop-filter: blur(28px) saturate(185%);
}

.jb-liquid-header-preview .main-menu-two__wrapper-inner::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    border-radius: 999px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
}

.jb-liquid-header-preview .main-menu-two__wrapper-inner > * {
    position: relative;
    z-index: 1;
}

.jb-liquid-header-preview .main-menu-two__search-box::before {
    background: var(--jb-header-line) !important;
}

.jb-liquid-header-preview .main-menu-two__search,
.jb-liquid-header-preview .main-menu-two__cart {
    color: var(--jb-header-ink) !important;
    transition: color .22s ease, transform .22s ease, opacity .22s ease;
}

.jb-liquid-header-preview .main-menu-two__search:hover,
.jb-liquid-header-preview .main-menu-two__cart:hover {
    color: var(--jb-header-blue) !important;
    transform: translateY(-1px);
}

/* CTA keeps strong contrast but uses a glossy translucent edge. */
.jb-liquid-header-preview .main-menu-two__get-quote-btn {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.42) !important;
    border-radius: 17px !important;
    background:
        linear-gradient(145deg, rgba(39, 103, 172, .96), rgba(19, 68, 128, .97)) !important;
    box-shadow:
        0 10px 24px rgba(20, 72, 130, .20),
        inset 0 1px 0 rgba(255,255,255,.34) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
}

.jb-liquid-header-preview .main-menu-two__get-quote-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
}

/* Sticky version: a little more opaque so navigation remains readable over content. */
.jb-liquid-header-preview .stricky-header.main-menu-two {
    background: transparent !important;
    box-shadow: none !important;
    padding: 8px 0;
}

.jb-liquid-header-preview .stricky-header .main-menu-two__wrapper,
.jb-liquid-header-preview .stricky-header .main-menu-two__wrapper-inner {
    background: transparent;
}

.jb-liquid-header-preview .stricky-header .main-menu-two__wrapper-inner {
    background:
        linear-gradient(135deg, rgba(255,255,255,.91), rgba(245,249,255,.80)) !important;
    border: 1px solid rgba(255,255,255,.90);
    border-radius: 18px !important;
    box-shadow:
        0 14px 42px rgba(17, 39, 70, .15),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
    -webkit-backdrop-filter: blur(30px) saturate(190%);
    backdrop-filter: blur(30px) saturate(190%);
}

@media (min-width: 1200px) {
    .jb-liquid-header-preview .main-menu-two .main-menu__list > li > a,
    .jb-liquid-header-preview .stricky-header.main-menu-two .main-menu__list > li > a {
        color: var(--jb-header-ink) !important;
        border-radius: 999px;
        transition: color .20s ease, background .20s ease, box-shadow .20s ease;
    }

    .jb-liquid-header-preview .main-menu-two .main-menu__list > li:hover > a,
    .jb-liquid-header-preview .main-menu-two .main-menu__list > li.current > a,
    .jb-liquid-header-preview .stricky-header.main-menu-two .main-menu__list > li:hover > a,
    .jb-liquid-header-preview .stricky-header.main-menu-two .main-menu__list > li.current > a {
        color: #0e4f94 !important;
        background: rgba(255,255,255,.50);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    }

    /* Dropdowns retain the theme behaviour; only the material changes. */
    .jb-liquid-header-preview .main-menu-two .main-menu__list > li > ul,
    .jb-liquid-header-preview .main-menu-two .main-menu__list > li > ul > li > ul,
    .jb-liquid-header-preview .stricky-header.main-menu-two .main-menu__list > li > ul,
    .jb-liquid-header-preview .stricky-header.main-menu-two .main-menu__list > li > ul > li > ul {
        overflow: hidden;
        background:
            linear-gradient(145deg, rgba(255,255,255,.92), rgba(243,248,255,.79)) !important;
        border: 1px solid rgba(255,255,255,.90);
        border-radius: 18px !important;
        box-shadow:
            0 20px 55px rgba(18, 40, 70, .16),
            inset 0 1px 0 rgba(255,255,255,.92) !important;
        -webkit-backdrop-filter: blur(28px) saturate(185%);
        backdrop-filter: blur(28px) saturate(185%);
    }

    .jb-liquid-header-preview .main-menu-two .main-menu__list > li > ul > li > a,
    .jb-liquid-header-preview .main-menu-two .main-menu__list > li > ul > li > ul > li > a,
    .jb-liquid-header-preview .stricky-header.main-menu-two .main-menu__list > li > ul > li > a,
    .jb-liquid-header-preview .stricky-header.main-menu-two .main-menu__list > li > ul > li > ul > li > a {
        color: #1a2d48 !important;
        background: transparent !important;
        transition: background .18s ease, color .18s ease, padding-left .18s ease;
    }

    .jb-liquid-header-preview .main-menu-two .main-menu__list > li > ul > li:hover > a,
    .jb-liquid-header-preview .main-menu-two .main-menu__list > li > ul > li > ul > li:hover > a,
    .jb-liquid-header-preview .stricky-header.main-menu-two .main-menu__list > li > ul > li:hover > a,
    .jb-liquid-header-preview .stricky-header.main-menu-two .main-menu__list > li > ul > li > ul > li:hover > a {
        color: #0d4c91 !important;
        background: rgba(226, 239, 255, .66) !important;
    }
}

@media (max-width: 1199px) {
    /* Keep the theme's mobile navigation logic untouched. */
    .jb-liquid-header-preview .main-menu-two__wrapper-inner {
        border-radius: 17px !important;
    }

    .jb-liquid-header-preview .mobile-nav__toggler {
        color: var(--jb-header-ink) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jb-liquid-header-preview .main-menu-two__search,
    .jb-liquid-header-preview .main-menu-two__cart,
    .jb-liquid-header-preview .main-menu-two .main-menu__list a,
    .jb-liquid-header-preview .stricky-header.main-menu-two .main-menu__list a {
        transition: none !important;
    }
}