/* =========================================================
General SMT Trading
Spare Parts Navigation
========================================================= */

.nav-spareparts {

    position: relative;

}


/* =========================================================
Spare Parts Dropdown
========================================================= */

.nav-spareparts-dropdown {

    position: absolute;

    top: calc(100% + 14px);

    left: 50%;

    min-width: 230px;

    padding: 10px;

    box-sizing: border-box;

    transform:
        translate3d(-50%, -8px, 0);

    border:
        1px solid var(--card-border);

    border-radius: 16px;

    background:
        rgba(9, 11, 20, .92);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .22);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 3000;

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast),
        visibility var(--transition-fast);

}


/* =========================================================
Dropdown Hover Bridge

Prevents the dropdown from closing while moving
the pointer from the navigation item into the menu.
========================================================= */

.nav-spareparts::after {

    content: "";

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    height: 14px;

    background: transparent;

    pointer-events: auto;

}

/* =========================================================
Dropdown Closing State
========================================================= */

.nav-spareparts.is-closing
.nav-spareparts-dropdown {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translate3d(-50%, -8px, 0);

}


/* =========================================================
Light Theme
========================================================= */

body.light .nav-spareparts-dropdown {

    background:
        rgba(245, 247, 255, .94);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .12);

}


/* =========================================================
Dropdown Visibility
========================================================= */

.nav-spareparts:hover
.nav-spareparts-dropdown,

.nav-spareparts:focus-within
.nav-spareparts-dropdown {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translate3d(-50%, 0, 0);

}

/* =========================================================
Force Dropdown Closed After Selection
========================================================= */

.nav-spareparts.is-closing
.nav-spareparts-dropdown {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translate3d(-50%, -8px, 0);

}


/* =========================================================
Spare Parts Categories
========================================================= */

.nav-spareparts-categories {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


/* =========================================================
Spare Parts Category Link
========================================================= */

.nav-spareparts-category {

    display: block;

    padding:
        9px 12px;

    border-radius: 10px;

    color:
        var(--text-soft);

    font-size: .82rem;

    font-weight: 600;

    line-height: 1.3;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);

}


.nav-spareparts-category:hover {

    color:
        var(--text);

    background:
        rgba(255, 255, 255, .08);

    transform:
        translateX(3px);

}


body.light
.nav-spareparts-category:hover {

    background:
        rgba(0, 0, 0, .06);

}