/* ============================================================
   nav-restyle.css
   Restyles the site-wide top-nav / bottom-nav to match the visual
   language already used on the product detail page (product.php):
   dark surfaces, a single amber accent, thin hairline borders —
   instead of the black/red "racing" theme baked into index.php's
   inline <style> block and racing_style.css.

   Loaded LAST (after vroom-restyle.css) so it wins the cascade
   without editing racing_style.css or the inline blocks directly,
   same pattern already used by vroom-restyle.css itself.
   ============================================================ */

:root {
    --nav-bg: var(--vr-surface, #1D2024);
    --nav-line: var(--vr-line, #33383E);
    --nav-accent: var(--vr-amber, #F5A623);
    --nav-text: var(--vr-text, #F2F1EC);
    --nav-text-dim: var(--vr-text-dim, #9AA0A6);
}

/* ---------- Top nav ---------- */
.top-nav {
    background: var(--nav-bg) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--nav-line) !important;
    backdrop-filter: none !important;
}
.top-nav::before,
.top-nav::after {
    content: none !important;
    display: none !important;
}

.brand {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.brand::before { display: none !important; }
.brand:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.logo-container {
    background: var(--nav-bg) !important;
    border: 1px solid var(--nav-line) !important;
    box-shadow: none !important;
    width: 42px !important;
    height: 42px !important;
}
.logo-container::before { display: none !important; }
.logo-container img {
    width: 26px !important;
    height: 26px !important;
    filter: none !important;
}
.brand:hover .logo-container {
    transform: none !important;
    border-color: var(--nav-accent) !important;
    box-shadow: none !important;
}
.brand:hover .logo-container img { filter: none !important; transform: none !important; }

.brand-text {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.3rem !important;
    background: none !important;
    -webkit-text-fill-color: var(--nav-text) !important;
    color: var(--nav-text) !important;
    text-shadow: none !important;
}
.brand-text::after { display: none !important; }
.brand:hover .brand-text {
    -webkit-text-fill-color: var(--nav-accent) !important;
    color: var(--nav-accent) !important;
    filter: none !important;
}

/* ---------- Nav icons (cart / wishlist / dashboard / logout / login) ---------- */
.nav-icon {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--nav-text-dim) !important;
    backdrop-filter: none !important;
}
.nav-icon::before,
.nav-icon::after { display: none !important; }
.nav-icon i {
    filter: none !important;
    color: var(--nav-text-dim);
}
.nav-icon:hover {
    background: rgba(245, 166, 35, 0.08) !important;
    border-color: var(--nav-line) !important;
    color: var(--nav-accent) !important;
    transform: none !important;
    box-shadow: none !important;
}
.nav-icon:hover i {
    color: var(--nav-accent) !important;
    filter: none !important;
    transform: none !important;
}
.nav-icon-active {
    background: rgba(245, 166, 35, 0.12) !important;
    border-color: var(--nav-accent) !important;
    box-shadow: none !important;
}
.nav-icon-active i {
    color: var(--nav-accent) !important;
    filter: none !important;
}

.badge {
    background: var(--nav-accent) !important;
    color: #14161A !important;
    border: 2px solid var(--nav-bg) !important;
    box-shadow: none !important;
    animation: none !important;
}

/* ---------- Bottom nav ---------- */
.bottom-nav {
    background: var(--nav-bg) !important;
    box-shadow: none !important;
    border-top: 1px solid var(--nav-line) !important;
    backdrop-filter: none !important;
}
.bottom-nav::before,
.bottom-nav::after {
    content: none !important;
    display: none !important;
}

.nav-item a {
    color: var(--nav-text-dim) !important;
}
.nav-item a::before {
    background: var(--nav-accent) !important;
    box-shadow: none !important;
}
.nav-item a::after { display: none !important; }
.nav-item a:hover,
.nav-item a.active {
    color: var(--nav-accent) !important;
    transform: none !important;
    text-shadow: none !important;
}
.nav-item i { filter: none !important; }
.nav-item a:hover i,
.nav-item a.active i {
    filter: none !important;
    transform: none !important;
}

/* ---------- Mobile nav toggle ---------- */
.nav-toggle {
    background: var(--nav-bg) !important;
    border: 1px solid var(--nav-line) !important;
    box-shadow: none !important;
}
.nav-toggle::before { display: none !important; }
.nav-toggle .bar {
    background: var(--nav-text) !important;
    box-shadow: none !important;
}
.nav-toggle .bar:nth-child(2) { background: var(--nav-text) !important; box-shadow: none !important; }
.nav-toggle:hover {
    background: var(--nav-bg) !important;
    border-color: var(--nav-accent) !important;
    box-shadow: none !important;
    transform: none !important;
}
.nav-toggle:hover .bar { box-shadow: none !important; }

/* ---------- Structural fallback for .nav-actions / .nav-toggle ----------
   index.php's inline <style> block already defines full structural CSS for
   these two classes (display, flex layout, the mobile slide-out panel).
   product.php never used a mobile toggle before, so racing_style.css may
   not define them at all there. These rules are written so they work
   standalone (product.php) without breaking or double-applying anything
   on index.php, since the values match what's already in use there. */
.nav-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.nav-toggle {
    display: none;
    cursor: pointer;
    padding: 11px 13px;
    border-radius: 10px;
    position: relative;
    z-index: 3;
    width: 46px;
    height: 42px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.nav-toggle .bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    transform-origin: center;
    position: relative;
    transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.nav-toggle .bar:nth-child(2) { width: 16px; align-self: flex-end; }
.nav-toggle.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 22px; }
.nav-toggle.open .bar:nth-child(2) { opacity: 0; transform: scaleX(0); width: 22px; }
.nav-toggle.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 22px; }

@media (max-width: 768px) {
    .nav-toggle { display: flex; }
    .nav-actions {
        position: fixed;
        top: 75px;
        right: -100%;
        background: var(--nav-bg) !important;
        flex-direction: column;
        width: 280px;
        height: calc(100vh - 75px);
        padding: 30px 24px;
        transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        box-shadow: none !important;
        z-index: 998;
        border-left: 1px solid var(--nav-line) !important;
        overflow-y: auto;
        align-items: flex-start;
    }
    .nav-actions.active { right: 0; }
    .nav-actions .nav-icon {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 20px;
        padding: 16px 18px;
        border-radius: 8px;
        margin-bottom: 8px;
    }
}