/* ========================================
   MOBILE NAVIGATION STYLES
   Motyw: igameble
   Wersja: 3.0.0 (Rebuilt Mobile System)

   STRUKTURA:
   1. Mobile Burger (legacy - ukryty gdy top bar aktywny)
   2. Mobile Navigation Overlay (nowy system)
   3. Legacy Mobile Header Styles
   ======================================== */

/* === MOBILE BURGER (legacy - ukrywamy gdy top bar aktywny) === */
.mobile-burger {
    display: none;
}

/* ========================================
   MOBILE NAVIGATION OVERLAY (Pełnoekranowe menu)
   Używane z nowym Top Bar z mobile-bars.php
   ======================================== */
@media (max-width: 768px) {

    /* --- OVERLAY CONTAINER --- */
    .mobile-nav-overlay {
        position: fixed;
        inset: 0;
        background: #303030;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Smooth transitions */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .mobile-nav-overlay.open,
    .mobile-nav-overlay:not([hidden]) {
        opacity: 1;
        visibility: visible;
    }

    .mobile-nav-overlay[hidden] {
        opacity: 0;
        visibility: hidden;
    }

    /* --- OVERLAY HEADER (z tabami) --- */
    .mobile-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        height: 56px;
        min-height: 56px;
        background: #303030;
        flex-shrink: 0;
    }

    .mobile-nav-tabs {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* --- TABY (Menu, Informacje, itd.) --- */
    .mobile-nav-tab {
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        color: #888;
        font-size: 15px;
        font-weight: 600;
        padding: 8px 0;
        cursor: pointer;
        transition: color 0.2s, border-color 0.2s;
        -webkit-tap-highlight-color: transparent;
    }

    /* Aktywny tab - biały tekst + niebieskie podkreślenie */
    .mobile-nav-tab.active {
        color: #fff;
        border-bottom-color: #2a3392;
    }

    /* Tab typu URL (link) - bez podkreślenia bo to link */
    a.mobile-nav-tab-link {
        text-decoration: none;
        color: #888;
        border-bottom: 2px solid transparent;
    }

    a.mobile-nav-tab-link:hover,
    a.mobile-nav-tab-link:focus {
        color: #fff;
    }

    .mobile-nav-tabs-separator {
        color: #555;
        font-size: 15px;
        user-select: none;
    }

    /* --- CLOSE BUTTON (X) - zmniejszony o 10% --- */
    .mobile-nav-header .close-btn {
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        color: #fff;
        font-size: 25px;
        font-weight: 300;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
        transition: opacity 0.2s;
    }

    .mobile-nav-header .close-btn:hover,
    .mobile-nav-header .close-btn:focus {
        opacity: 0.7;
    }

    /* --- SEPARATOR LINE --- */
    .mobile-nav-separator {
        height: 1px;
        background: #444;
        flex-shrink: 0;
    }

    /* --- TAB CONTENT --- */
    .mobile-nav-content {
        display: none;
        flex-direction: column;
        flex: 1;
        overflow-y: auto;
        padding: 0;
    }

    .mobile-nav-content.active {
        display: flex;
    }

    .mobile-nav-inner {
        padding: 0;
    }

    /* --- MOBILE MENU LIST --- */
    .mobile-menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-menu li {
        border-bottom: 1px solid #444;
        margin: 0;
        padding: 0;
    }

    .mobile-menu li:last-child {
        border-bottom: none;
    }

    /* --- MENU LINKS - Level 0 (główny poziom) --- */
    .mobile-menu > li > a,
    .mobile-menu > li > .menu-link-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 7px 16px;
        color: #fff;
        font-size: 17px;
        font-weight: 400 !important;
        text-decoration: none;
        background: none;
        width: 100%;
        box-sizing: border-box;
        transition: background-color 0.2s;
        min-height: 40px;
    }

    .mobile-menu > li > a:hover,
    .mobile-menu > li > a:focus,
    .mobile-menu > li > .menu-link-wrapper:hover {
        background-color: #3a3a3a;
    }

    .mobile-menu .menu-link-wrapper a {
        flex: 1;
        color: inherit;
        text-decoration: none;
        padding: 0 !important;
        min-height: auto;
        font-weight: 400 !important;
        display: block;
    }

    /* --- ARROW TOGGLE (strzałka rozwijania) --- */
    /* Domyślnie SZARA, BIAŁA gdy aktywna */
    .mobile-menu .arrow-toggle,
    .mobile-menu .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: 8px;
        color: #888;
        transition: transform 0.25s, color 0.2s;
        cursor: pointer;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
        background: none;
        border: none;
        padding: 0;
    }

    .mobile-menu .arrow-toggle svg,
    .mobile-menu .submenu-toggle svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
    }

    /* Strzałka BIAŁA gdy submenu otwarte */
    .mobile-menu li.open > .menu-link-wrapper > .arrow-toggle,
    .mobile-menu li.open > .menu-link-wrapper > .submenu-toggle {
        transform: rotate(90deg);
        color: #fff;
    }

    /* --- SUB-MENU - wszystkie poziomy jednolity styl --- */
    .mobile-menu .sub-menu {
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
        background: #282828;
    }

    .mobile-menu li.menu-item-has-children.open > .sub-menu {
        display: block;
    }

    .mobile-menu .sub-menu li {
        border-bottom: 1px solid #3a3a3a;
    }

    .mobile-menu .sub-menu li:last-child {
        border-bottom: none;
    }

    /* Jednolity styl dla wszystkich poziomów submenu - wyrównane do jednej linii */
    /* WAŻNE: > li > a - tylko direct child, nie wewnętrzny <a> w menu-link-wrapper */
    .mobile-menu .sub-menu > li > a,
    .mobile-menu .sub-menu > li > .menu-link-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 7px 16px;
        color: #fff;
        font-size: 17px;
        font-weight: 400 !important;
        text-decoration: none;
        min-height: 40px;
        transition: background-color 0.2s;
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-menu .sub-menu > li > a:hover,
    .mobile-menu .sub-menu > li > .menu-link-wrapper:hover {
        background-color: #3a3a3a;
    }

}

/* ========================================
   HEADER VISIBILITY AT <=990px
   mob.css loads at (max-width: 990px), so these top-level rules
   apply for the full 0-990px range.
   ======================================== */

/* Hide desktop header and nav on tablets/mobile */
.desktop-header {
    display: none !important;
}

/* Hide legacy nav-mobile by default (shown via JS .open class) */
.nav-mobile {
    display: none;
}

/* When mobile top bar is active, hide legacy mobile header too */
body.has-mobile-top-bar .mobile-header,
body.has-mobile-top-bar .header-inner.mobile-header {
    display: none !important;
}

/* ========================================
   LEGACY MOBILE HEADER STYLES
   (zachowane dla kompatybilności gdy top bar wyłączony)
   UWAGA: Używamy max-width: 767px aby uniknąć konfliktu z desktop.css (min-width: 768px)
   ======================================== */
@media (max-width: 767px) {

    /* === HEADER MOBILE === */
    /* Ukryj desktop header na mobilnych */
    .desktop-header {
        display: none !important;
    }

    /* Pokaż mobile header na mobilnych */
    .header-inner.mobile-header {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 62px;
        padding: 0 15px;
        background: #fff;
        border-bottom: 1px solid #e0e0e0;
        position: relative;
        z-index: 100;
        width: 100%;
        max-width: 100%;
        gap: 15px;
        box-sizing: border-box;
    }

    /* Gdy top bar jest aktywny - ukryj legacy header */
    body.has-mobile-top-bar .mobile-header,
    body.has-mobile-top-bar .header-inner.mobile-header {
        display: none !important;
    }

    /* Gdy top bar NIE jest aktywny - pokaż legacy header */
    body:not(.has-mobile-top-bar) .mobile-header {
        display: flex !important;
    }

    body:not(.has-mobile-top-bar) .header-inner.mobile-header .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        margin: 0;
        min-width: 0;
        flex-shrink: 1;
    }

    body:not(.has-mobile-top-bar) .header-inner.mobile-header .logo img {
        max-width: 120px;
        height: 40px;
        display: block;
    }

    body:not(.has-mobile-top-bar) .header-inner.mobile-header .cart-link {
        margin-left: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 80px;
        max-width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        flex-shrink: 0;
    }

    body:not(.has-mobile-top-bar) .header-inner.mobile-header .cart-amount {
        font-size: 15px;
        font-weight: 700;
        display: inline-block;
        width: 90px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* === LEGACY MOBILE BURGER BUTTON === */
    body:not(.has-mobile-top-bar) .mobile-burger {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 38px;
        height: 38px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1301;
    }

    body:not(.has-mobile-top-bar) .mobile-burger span {
        width: 28px;
        height: 4px;
        background: #232323;
        border-radius: 2px;
        transition: all .3s;
        display: block;
    }

    /* === LEGACY NAV-MOBILE (stare menu - fallback) === */
    .nav-mobile {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #fff;
        z-index: 1300;
        display: none;
        flex-direction: column;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
        max-height: 100vh;
        overflow-y: auto;
    }

    .nav-mobile.open {
        display: flex !important;
        opacity: 1;
        pointer-events: auto;
    }

    /* === LEGACY MOBILE MENU HEADER === */
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 62px;
        padding: 0 18px;
        border-bottom: 1px solid #e0e0e0;
        font-size: 21px;
        font-weight: bold;
    }

    .mobile-menu-title {
        font-size: 21px;
        font-weight: bold;
        color: #232323;
        letter-spacing: 0.04em;
    }

    .mobile-close {
        font-size: 36px;
        background: none;
        border: none;
        cursor: pointer;
        color: #232323;
        padding: 0 10px;
        line-height: 1;
        height: 38px;
    }

    /* === UKRYJ DESKTOP MENU === */
    .main-menu,
    .header-nav,
    .nav-main {
        display: none !important;
    }
}

/* === ANIMACJA ROZWIJANIA === */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === RESPONSYWNOŚĆ DODATKOWA === */
@media (max-width: 900px) {

    /* ========================================
       1. BREADCRUMBS - NAPRAWIONE PRZEZ PHP (functions.php)
       Pierwszy element breadcrumbs jest usuwany przez filtr woocommerce_get_breadcrumb
       ======================================== */


    /* ========================================
       2. GALERIA PRODUKTU - WYCENTROWANIE
       ======================================== */

    /* Wycentruj całą sekcję galerii */
    body.single-product .product-page-container .product-gallery-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0;
        margin: 0 auto;
    }

    /* Wycentruj główne zdjęcie */
    body.single-product .product-page-container .product-gallery-section .product-gallery-main {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    body.single-product .product-page-container .product-gallery-section .product-gallery-main a {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    body.single-product .product-page-container .product-gallery-section .product-gallery-main img {
        margin: 0 auto;
        display: block;
    }

    /* Wycentruj slider miniaturek */
    body.single-product .product-page-container .product-gallery-section .product-gallery-thumbnails-slider {
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    body.single-product .product-page-container .product-gallery-section .thumbs-viewport {
        margin: 0 auto;
    }


    /* ========================================
       3. SEKCJA PRODUKTU - PADDING 15px (jak stopka)
       ======================================== */

    /* Cała sekcja informacji o produkcie */
    body.single-product .product-page-container .product-info-section {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Dla pewności - każdy element osobno z padding: 0 */
    body.single-product .product-page-container .product-info-section .product_title,
    body.single-product .product-page-container .product-info-section .product-price,
    body.single-product .product-page-container .product-info-section .woocommerce-product-rating,
    body.single-product .product-page-container .product-info-section .product-short-description,
    body.single-product .product-page-container .product-info-section .product_meta,
    body.single-product .product-page-container .product-info-section form.cart,
    body.single-product .product-page-container .product-info-section .variations,
    body.single-product .product-page-container .product-info-section .woocommerce-variation-description {
        padding-left: 0;
        padding-right: 0;
    }


    /* ========================================
       4. KATALOG TKANIN - PRZYCISK TOP 10
       ======================================== */

    /* Kontener akcji - zmień na kolumnę */
    body .tkaniny-archive-wrapper .tkaniny-archive-filters .tkaniny-filters-inner .tkaniny-filter-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding: 0;
        align-items: stretch;
    }

    /* Lewy i prawy kontener na całą szerokość */
    body .tkaniny-archive-wrapper .tkaniny-archive-filters .tkaniny-filters-inner .tkaniny-filter-actions-left,
    body .tkaniny-archive-wrapper .tkaniny-archive-filters .tkaniny-filters-inner .tkaniny-filter-actions-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Wszystkie przyciski na całą szerokość */
    body .tkaniny-archive-wrapper .tkaniny-archive-filters .tkaniny-filters-inner .tkaniny-filter-actions .tkaniny-filter-apply,
    body .tkaniny-archive-wrapper .tkaniny-archive-filters .tkaniny-filters-inner .tkaniny-filter-actions .tkaniny-filter-clear,
    body .tkaniny-archive-wrapper .tkaniny-archive-filters .tkaniny-filters-inner .tkaniny-filter-actions .tkaniny-top10-button {
        width: 100%;
        max-width: 100%;
        text-align: center;
        padding: 12px 20px;
        box-sizing: border-box;
        margin: 0;
        display: block;
    }

    /* Żółty przycisk TOP 10 - upewnij się że jest w obrysie */
    body .tkaniny-archive-wrapper .tkaniny-archive-filters .tkaniny-filters-inner .tkaniny-filter-actions .tkaniny-top10-button {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    /* ========================================
       5. INNE STYLE (istniejące)
       ======================================== */

    .category-desc-wrap {
        padding-bottom: 100px;
        padding-left: 0;
        padding-right: 0;
    }

    .term-description {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 0;
    }

    .term-description.is-open,
    .term-description.show {
        margin-bottom: 100px;
    }

    .term-description__btn {
        margin-bottom: 0;
    }

    .shop-products {
        padding-bottom: 40px;
    }

    .footer-outer,
    .footer-widgets-bg,
    .footer-bottom {
        padding-bottom: 0;
    }
}

@media (max-width: 600px) {
    .header-inner.mobile-header .logo img {
        max-width: 100px;
        height: auto;
    }
}