/* customize css here */

/* =============================================
   STICKY SIDEBAR - lewa kolumna przyklejona
   podczas przewijania na desktop
   ============================================= */

@media (min-width: 992px) {
    #left_column {
        position: sticky;
        top: 20px;
        height: fit-content;
    }
}

/* =============================================
   MENU KATEGORII - strona główna (home-page)
   Scroll gdy lista dłuższa niż slider
   ============================================= */

@media (min-width: 992px) {
    .home-page .vertical-menu-content {
        max-height: 420px;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: #ccc #f5f5f5;
    }
    .home-page .vertical-menu-content::-webkit-scrollbar {
        width: 4px;
    }
    .home-page .vertical-menu-content::-webkit-scrollbar-track {
        background: #f5f5f5;
    }
    .home-page .vertical-menu-content::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 2px;
    }
}

/* =============================================
   MENU KATEGORII - pozostałe strony (other-pages)
   Nagłówek klikalny, lista rozwija się jako dropdown
   ============================================= */

@media (min-width: 992px) {
    /* Nagłówek - klikalny, kursor pointer */
    .other-pages .vertical-megamenus h4.title {
        cursor: pointer;
        user-select: none;
        position: relative;
    }

    /* Strzałka w nagłówku sygnalizująca rozwijanie */
    .other-pages .vertical-megamenus h4.title::after {
        content: '\25BE';
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        color: #fff;
        opacity: 0.8;
        transition: transform .2s;
    }
    /* Strzałka obraca się gdy Bootstrap collapse jest otwarty */
    .other-pages .vertical-megamenus h4.title.open::after,
    .other-pages .collapse.vertical-menu-content.in ~ * h4.title::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Lista - absolutna, nie przesuwa treści */
    /* Bootstrap 3 sam ustawia height:0/auto przez .collapse/.in */
    .other-pages .collapse.vertical-menu-content {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        z-index: 1200 !important;
        width: 220px !important;
        background: #fff;
        box-shadow: 0 4px 16px rgba(0,0,0,.15);
        border-radius: 0 0 4px 4px;
        /* NIE ustawiamy display:none — Bootstrap collapse to kontroluje */
    }

    /* Gdy otwarte - ogranicz wysokość i dodaj scroll */
    .other-pages .collapse.vertical-menu-content.in {
        max-height: 420px;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: #ccc #f5f5f5;
    }
    .other-pages .collapse.vertical-menu-content.in::-webkit-scrollbar {
        width: 4px;
    }
    .other-pages .collapse.vertical-menu-content.in::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 2px;
    }

    /* Kontener musi być relative żeby dropdown był relatywny do niego */
    .other-pages .vertical-megamenus {
        position: relative;
    }

    /* Ukryj ikonkę toggle - cały h4 jest klikalny przez JS */
    .other-pages .icon-reorder {
        display: none !important;
    }

    /* Cały h4 klikalny - rozszerzamy area kliknięcia na Bootstrap collapse */
    .other-pages .vertical-megamenus h4.title {
        display: block;
    }
    .other-pages .vertical-megamenus h4.title > span.icon-reorder {
        display: none !important;
    }
}

/* Nagłówek "Kategorie" - lepszy wygląd */
.box-vertical-megamenus .vertical-megamenus h4.title {
    background: #2c3e50 !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    border-radius: 4px 4px 0 0;
    padding: 11px 15px;
    height: auto;
}

/* Kontener listy kategorii */
.box-vertical-megamenus .megamenus-ul {
    border: 1px solid #e8edf2 !important;
    border-top: none !important;
    border-radius: 0 0 4px 4px;
    background: #fff;
    padding-top: 0 !important;
    margin: 0;
}

/* Pojedynczy element kategorii */
.box-vertical-megamenus .megamenus-ul li.dropdown {
    margin-top: 0 !important;
    border-left: 3px solid transparent;
    border-bottom: 1px solid #f0f3f7;
    transition: border-color .15s, background .15s;
}

.box-vertical-megamenus .megamenus-ul li.dropdown:last-child {
    border-bottom: none;
}

/* Link kategorii */
.box-vertical-megamenus .megamenus-ul li a.parent {
    padding: 8px 28px 8px 12px !important;
    font-size: 13px;
    color: #444 !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    border-top: none !important;
    border-bottom: none !important;
    text-decoration: none;
    line-height: 1.4;
}

/* Ikonka strzałki przed nazwą */
.box-vertical-megamenus .megamenus-ul li a.parent span {
    padding-left: 0 !important;
}

/* Hover na elemencie */
.box-vertical-megamenus .megamenus-ul li.dropdown:hover {
    border-left-color: #e67e22 !important;
    background: #fafbfc;
}

.box-vertical-megamenus .megamenus-ul li.dropdown:hover a.parent {
    color: #e67e22 !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Aktywna kategoria */
.box-vertical-megamenus .megamenus-ul li.active,
.box-vertical-megamenus .megamenus-ul li.dropdown.current {
    border-left-color: #e67e22 !important;
    background: #fff8f2;
}

.box-vertical-megamenus .megamenus-ul li.active a.parent,
.box-vertical-megamenus .megamenus-ul li.dropdown.current a.parent {
    color: #e67e22 !important;
    font-weight: 600;
}

/* Strzałka FontAwesome po prawej - wyczyść stary absolut */
.box-vertical-megamenus .megamenus-ul li.parent a.parent::before {
    display: none !important;
}

.box-vertical-megamenus .megamenus-ul li.parent a.parent::after {
    display: none !important;
}