/* ============================================
   CODEX – MOBILE NAVBAR + SIDEBAR
   Navbar 1-liniowy, search w sidebarze
   ============================================ */

@media (max-width: 768px) {

    html, body { overflow-x: hidden; }

    /* ============================================
       NAVBAR – tylko 1 linia, ~50px
       ============================================ */
    .navbar {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000 !important;
        background: rgba(10, 10, 10, 0.98) !important;
    }

    .nav-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        padding: 8px 12px !important;
        gap: 8px !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .nav-logo {
        order: 1;
        font-size: 18px;
        margin-right: auto;
        flex-shrink: 0;
    }

    .nav-actions {
        order: 2;
        display: flex !important;
        gap: 4px;
        flex-shrink: 0;
    }

    .nav-actions .btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }

    .nav-toggle {
        order: 3;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        cursor: pointer;
        background: transparent;
        border: none;
        flex-shrink: 0;
    }

    .nav-toggle .bar {
        display: block;
        width: 22px;
        height: 2.5px;
        background: #fff;
        margin: 3px 0;
    }

    /* Search w navbarze – UKRYTY (na mobile idzie do sidebaru) */
    .nav-container > .nav-search {
        display: none !important;
    }

    /* ============================================
       SIDEBAR – z lewej
       ============================================ */
    ul.nav-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;

        width: 280px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;

        background: #0a0a0a !important;
        border-right: 2px solid #00ff00 !important;
        list-style: none !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        transform: translateX(-100%) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: transform 0.3s ease, opacity 0.3s, visibility 0.3s !important;
        z-index: 1 !important;
    }

    ul.nav-menu.active {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Nagłówek CODEX */
    ul.nav-menu::before {
        content: "CODEX";
        display: block;
        flex-shrink: 0;

        font-family: 'Orbitron', 'Courier New', monospace;
        font-size: 20px;
        font-weight: 900;
        color: #00ff00;
        letter-spacing: 5px;
        text-align: center;
        text-transform: uppercase;
        line-height: 1;

        padding: 20px 16px 14px 16px;
        margin: 0 0 8px 0;
        background: #0d0d0d;
        border-bottom: 2px solid #00ff00;
        text-shadow: 0 0 14px rgba(0, 255, 0, 0.5);
    }

    /* Search w sidebarze – WIDOCZNY */
    ul.nav-menu .nav-search {
        display: block !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 16px !important;
        margin: 0 0 14px 0 !important;
    }

    ul.nav-menu .nav-search__form {
        width: 100% !important;
    }

    ul.nav-menu .nav-search__input {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        background: #15151a !important;
        color: #fff !important;
        border: 1px solid #222 !important;
        border-radius: 8px !important;
    }

    /* Opcje */
    ul.nav-menu .nav-item {
        display: block;
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul.nav-menu .nav-item .nav-link {
        display: block;
        width: 100%;
        box-sizing: border-box;

        padding: 14px 22px;
        margin: 0;

        color: #d0d0d0 !important;
        background: transparent;
        border-left: 3px solid transparent;

        font-family: 'Inter', 'Roboto', sans-serif;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        text-transform: none;
        text-align: left;
        text-decoration: none;
        white-space: nowrap;

        transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    ul.nav-menu .nav-item .nav-link:hover,
    ul.nav-menu .nav-item .nav-link.active {
        color: #00ff00 !important;
        background: rgba(0, 255, 0, 0.06);
        border-left-color: #00ff00;
    }

    ul.nav-menu .nav-item .nav-link::after {
        display: none !important;
        content: none !important;
    }

    /* Backdrop */
    body.menu-open::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 9998;
    }
}

/* Małe ekrany */
@media (max-width: 480px) {
    .nav-container { padding: 7px 10px !important; }
    .nav-logo { font-size: 16px !important; }
    .nav-actions .btn { padding: 5px 8px !important; font-size: 10px !important; }

    ul.nav-menu::before {
        font-size: 18px;
        padding: 18px 14px 12px 14px;
    }

    ul.nav-menu .nav-item .nav-link {
        padding: 13px 18px;
        font-size: 14px;
    }
}

/* ============================================
   FIX: usuń pustą przestrzeń pod navbarem na mobile
   (hero/sections mają padding-top: 120px – niepotrzebne)
   ============================================ */
@media (max-width: 768px) {

    /* Wszystkie sekcje ze starym padding-top: 120px */
    section,
    .hero,
    .page-hero,
    .about-hero,
    .product-page,
    .cart-page,
    .payment-page,
    .auth-section,
    main {
        padding-top: 60px !important;
    }

    /* Hero konkretnie */
    .hero {
        padding-top: 60px !important;
        min-height: auto !important;
    }

    .hero-content,
    .hero h1,
    .hero-title {
        margin-top: 0 !important;
    }

    /* Sekcje z inline padding-top: 120px (nadpisanie) */
    section[style*="padding-top: 120px"],
    section[style*="padding-top:120px"] {
        padding-top: 60px !important;
    }
}

@media (max-width: 480px) {
    section,
    .hero,
    .page-hero,
    .about-hero,
    .product-page,
    .cart-page,
    .payment-page,
    .auth-section,
    main {
        padding-top: 55px !important;
    }
}

/* ============================================
   FIX: navbar nie może mieć overflow (nie scrolluje się w środku)
   ============================================ */
@media (max-width: 768px) {

    .navbar {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    .nav-container {
        position: relative !important;
        top: 0 !important;
        margin-top: 0 !important;
        transform: none !important;
        height: auto !important;
    }

    .nav-toggle {
        position: relative !important;
        top: 0 !important;
        transform: none !important;
    }
}