/* /modules/megamenupro/views/css/front/megamenupro.css */

/* --- Ogólny Reset & Box Sizing --- */
.megamenupro *, .megamenupro *::before, .megamenupro *::after {
    box-sizing: border-box;
}

/* --- Główny Blok: megamenupro --- */
.megamenupro {
    position: relative;
}

/* --- Elementy Bloku --- */
.megamenupro__mobile-toggle {
    display: inline-block; /* Pokaż przycisk tylko na mobile (patrz media query) */
    padding: 10px;
    background: none;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    border-radius: 3px;
    color: #6c757d;
    transition: background-color 0.2s ease;
}
.megamenupro__mobile-toggle:hover {
    background-color: #e9ecef;
}
.megamenupro__mobile-toggle:focus-visible { /* Styl focusa dla dostępności */
    outline: 2px solid Highlight; /* Kolor systemowy */
    outline-offset: 2px;
}
.megamenupro__mobile-toggle:focus { /* Fallback */
     outline: 2px solid Highlight;
     background-color: #eee;
}


.megamenupro__nav {
    /* Style mobile: Ukryte i wysuwane */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%; /* Lub stała szerokość np. 300px */
    max-width: 320px; /* Maksymalna szerokość dla panelu bocznego */
    background-color: #fff;
    border: 1px solid #dee2e6;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: calc(100vh - 60px); /* Ogranicz wysokość i dodaj scroll */
    overflow-y: auto;
    display: block; /* Zawsze block, kontrolujemy widoczność przez transform */
    transform: translateX(-105%);
    visibility: hidden;
    opacity: 0.98; /* Lekka przezroczystość */
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0s linear 0.35s, opacity 0.35s ease;
}

.megamenupro__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.megamenupro__item {
    position: relative;
}
/* Modyfikator poziomu */
.megamenupro__item--level-0 {
    border-bottom: 1px solid #f1f1f1;
}
/* Modyfikator dla elementu z dropdownem */
.megamenupro__item--has-dropdown {
    /* Można dodać specyficzne style */
}

.megamenupro__link {
    display: block;
    padding: 12px 15px; /* Trochę więcej paddingu */
    text-decoration: none;
    color: #3a3a3a;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.15s ease-out;
    outline: none;
    position: relative;
}
.megamenupro__link:hover,
.megamenupro__link:focus {
    background-color: #f8f8f8;
    color: #000;
    text-decoration: none;
}
.megamenupro__link:focus-visible {
    box-shadow: 0 0 0 2px rgba(50, 115, 220, 0.5);
}
.megamenupro__link:focus {
     box-shadow: 0 0 0 2px rgba(50, 115, 220, 0.5); /* Fallback */
}
/* Modyfikator poziomu */
.megamenupro__link--level-0 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}
.megamenupro__link--level-1 { /* Linki w dropdownach */
    padding: 6px 10px; /* Mniejszy padding */
    font-size: 0.9em; /* Względny rozmiar */
    color: #414141;
    margin: 0 -6px; /* Kompensacja paddingu dla hover */
    border-radius: 3px;
}
.megamenupro__link--level-1:hover { background-color: #f5f5f5; }
/* Modyfikator dla linku otwierającego dropdown */
.megamenupro__link--dropdown-toggle {
    /* Dodatkowe style, jeśli potrzebne */
}

.megamenupro__link-icon {
    vertical-align: middle;
    margin-right: 8px; /* Większy margines ikony */
    width: 1.2em;
    text-align: center;
    display: inline-block; /* Zapobiegaj załamaniu linii */
}
.megamenupro__link-image {
    max-height: 20px;
    max-width: 35px;
    margin-right: 8px;
    vertical-align: middle;
    object-fit: contain;
}
.megamenupro__link-item {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Modyfikator dla separatora */
.megamenupro__link-item--separator {
    height: 1px;
    background-color: #e9ecef;
    margin: 8px 0;
    list-style: none;
    padding: 0;
}


.megamenupro__dropdown {
    display: none;
    /* Style mobilne (Accordion) */
    position: static;
    background-color: #fdfdfd;
    padding-left: 20px;
    border-top: 1px solid #f1f1f1;
    width: auto;
}
/* Modyfikatory */
.megamenupro__dropdown--multi-row { /* Jeśli potrzeba specjalnych styli dla wielu wierszy */ }
.megamenupro__dropdown--single-row { /* Jeśli potrzeba specjalnych styli dla jednego wiersza */ }

.megamenupro__dropdown-inner {
    /* Wewnętrzny kontener */
}
.megamenupro__dropdown-indicator {
     font-size: 1.2rem;
     transition: transform 0.2s ease-in-out; /* Płynniejsze obracanie */
     margin-left: 5px; /* Odstęp od tekstu */
}

.megamenupro__row {
    padding: 8px 0;
    border-bottom: 1px dashed #e9ecef; /* Mobile separator */
}
.megamenupro__row:last-child {
    border-bottom: none;
}

.megamenupro__column {
    width: 100% !important; /* Mobile */
    padding: 8px 0; /* Mobile */
    float: none !important; /* Mobile */
}
/* Modyfikator typu kolumny (opcjonalny) */
.megamenupro__column--type-links_list { /* ... */ }
.megamenupro__column--type-html_block { /* ... */ }
/* ... etc ... */

.megamenupro__column-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: #414141;
    font-size: 0.95em; /* Mobile */
    display: block; /* Upewnij się, że jest blokowy */
    padding: 4px 0;
}
/* Modyfikator dla linku tytułu */
.megamenupro__column-title--link {
    color: #414141;
    text-decoration: none;
}
.megamenupro__column-title--link:hover {
    color: #000;
    text-decoration: underline;
}

.megamenupro__links-list {
    padding-left: 5px; /* Mobile */
    list-style: none;
    margin: 0;
}

.megamenupro__html-block {
    line-height: 1.5;
    font-size: 0.9em; /* Mobile */
    padding: 5px 0;
}
.megamenupro__html-block p:last-child { margin-bottom: 0; }

.megamenupro__image-banner {
    margin-top: 5px;
}
.megamenupro__image-banner img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 3px; /* Lekkie zaokrąglenie rogów banera */
}

.megamenupro__category-grid {
    margin-top: 5px;
}
.megamenupro__category-grid .row { /* Bootstrap row */
    margin-left: -5px; margin-right: -5px; /* Mniejsze marginesy dla siatki */
}
.megamenupro__category-grid-item {
    margin-bottom: 10px;
    text-align: center;
    padding-left: 5px; padding-right: 5px; /* Mniejsze paddingi */
}
.megamenupro__category-grid-link {
    display: block; text-decoration: none; color: inherit; transition: opacity 0.2s ease; padding: 5px; border-radius: 3px;
}
.megamenupro__category-grid-link:hover { opacity: 0.8; background-color: #f8f8f8; }
.megamenupro__category-grid-image {
    display: block; max-width: 60px; height: auto; margin: 0 auto 5px auto; border: 1px solid #eee;
}
.megamenupro__category-grid-no-image {
    display: flex; align-items: center; justify-content: center; height: 60px; width: 100%; font-size: 2.5rem; color: #ccc; margin-bottom: 5px; line-height: 1;
}
.megamenupro__category-grid-name { display: block; font-size: 0.9em; line-height: 1.2; }

.megamenupro__product-list { margin-top: 5px; }
.megamenupro__product-item { display: flex; align-items: flex-start; margin-bottom: 10px; padding: 6px; border-bottom: 1px solid #f1f1f1; border-radius: 3px; transition: background-color 0.15s ease; }
.megamenupro__product-item:last-child { margin-bottom: 0; border-bottom: none; }
.megamenupro__product-item:hover { background-color: #f8f8f8; }
.megamenupro__product-image-container { flex-shrink: 0; width: 40px; margin-right: 10px; } /* Mobile size */
.megamenupro__product-image { max-width: 100%; height: auto; border: 1px solid #eee; }
.megamenupro__product-no-image { display: flex; width: 40px; height: 40px; background-color: #f0f0f0; color: #ccc; align-items: center; justify-content: center; font-size: 1.2rem;}
.megamenupro__product-details { flex-grow: 1; }
.megamenupro__product-name { margin: 0 0 3px 0; font-size: 0.85em; line-height: 1.3; font-weight: normal; }
.megamenupro__product-name a { color: inherit; text-decoration: none; font-weight: 600;}
.megamenupro__product-name a:hover { text-decoration: underline; }
.megamenupro__product-price { font-size: 0.85em; font-weight: bold; }
.megamenupro__product-price .regular-price { text-decoration: line-through; color: #999; margin-right: 5px; font-weight: normal; }
.megamenupro__product-price .discount-price { color: #D00; }

.megamenupro__manufacturers-list { list-style: none; padding: 0; margin: 5px 0 0 0; }
.megamenupro__manufacturer-item { margin-bottom: 0; padding: 0; list-style: none; }
.megamenupro__manufacturer-link { display: flex; align-items: center; text-decoration: none; color: inherit; padding: 6px 6px; transition: background-color 0.15s ease; font-size: 0.9em; margin: 0 -6px; border-radius: 3px; }
.megamenupro__manufacturer-link:hover { background-color: #f5f5f5; color: #000; }
.megamenupro__manufacturer-logo { max-height: 20px; max-width: 40px; margin-right: 8px; flex-shrink: 0; object-fit: contain; background-color: #fff; border: 1px solid #eee; }

/* --- Overlay dla mobilnego menu --- */
.megamenupro__overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999;
    opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

/* --- Modyfikatory Stanu --- */
.megamenupro--mobile-active .megamenupro__nav { transform: translateX(0); visibility: visible; opacity: 1; transition-delay: 0s; }
.megamenupro--mobile-active .megamenupro__overlay { opacity: 1; visibility: visible; transition-delay: 0s; }
.megamenupro-body-no-scroll { overflow: hidden; }
.megamenupro__item--submenu-open > .megamenupro__dropdown { display: block; } /* Mobile */
.megamenupro__item--submenu-open > .megamenupro__link .megamenupro__dropdown-indicator { transform: rotate(180deg); }
.megamenupro__item--is-active > .megamenupro__link,
.megamenupro__link--is-active { font-weight: bold; color: #000; }
.megamenupro__item--level-0.megamenupro__item--is-active > .megamenupro__link--level-0 { /* Aktywny element głowny */ }


/* --- Desktop Styles --- */
@media (min-width: 992px) {
    .megamenupro__mobile-toggle { display: none; }
    .megamenupro__nav { display: block !important; position: static; width: auto; background: none; border: none; box-shadow: none; max-height: none; overflow: visible; transform: none; visibility: visible; opacity: 1; transition: none; }
    .megamenupro__overlay { display: none; } /* Ukryj overlay na desktopie */
    .megamenupro__list--level-0 { display: flex; flex-wrap: wrap; }
    .megamenupro__item--level-0 { border-bottom: none; }
    .megamenupro__link--level-0 { /* Dodatkowe style dla linków głównych na desktopie */ padding: 15px 12px; }

    .megamenupro__dropdown {
        display: none; position: absolute; top: 100%; left: 0; width: auto; min-width: 600px; max-width: calc(100vw - 30px);
        background-color: #fff; border: 1px solid #e1e1e1; border-top: none; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        padding: 15px; z-index: 1001; opacity: 0; visibility: hidden; pointer-events: none;
        transform: translateY(5px); transition: opacity 0.25s ease-out, visibility 0s linear 0.25s, transform 0.25s ease-out;
        padding-left: 15px; /* Przywróć padding dla treści */
    }
    .megamenupro__item--level-0:hover > .megamenupro__dropdown,
    .megamenupro__item--level-0:focus-within > .megamenupro__dropdown,
    .megamenupro__item--level-0.is-open > .megamenupro__dropdown {
        display: block; opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; pointer-events: auto;
    }

     .megamenupro__dropdown-inner { padding: 10px; }
     .megamenupro__row { margin: 0 -15px 15px -15px; border-bottom: none; padding: 0; }
     .megamenupro__row:last-child { margin-bottom: 0; }
     .megamenupro__column { padding: 0 15px; width: auto !important; float: left !important; margin-bottom: 15px; border-left: 1px solid #f1f1f1; }
     .megamenupro__row > .row > .megamenupro__column:first-child { border-left: none; }
     .megamenupro__column-title { font-size: 1em; margin-bottom: 12px; padding-bottom: 5px; border-bottom: 1px solid #eee; font-weight: 600; }
     .megamenupro__column-title--link:hover { text-decoration: underline; }

      .megamenupro__links-list { padding-left: 0; }
      .megamenupro__link--level-1 { font-size: 0.95em; padding: 6px 6px; }
      .megamenupro__html-block { font-size: 1em; line-height: 1.5; }
      .megamenupro__category-grid-image { max-width: 100%; height: auto; margin-bottom: 8px;}
      .megamenupro__category-grid-no-image { font-size: 2.5rem; height: 60px; width: 100%; }
      .megamenupro__category-grid-name { font-size: 0.9em; }
      .megamenupro__product-image-container { width: 60px; }
      .megamenupro__product-no-image { width: 60px; height: 60px; font-size: 1.8rem;}
      .megamenupro__product-name { font-size: 0.95em; }
      .megamenupro__product-price { font-size: 0.9em; }
      .megamenupro__manufacturer-link { font-size: 0.95em; }

} /* Koniec @media */