/**
 * Topbar & Mega Menu Styles
 * Stylizacja dla 3-poziomowego menu nawigacyjnego
 * Based on Figma design
 * Using Design System variables from design-system.css
 *
 * NOTE:
 * - Fonts are imported in design-system.css (loaded first)
 * - Button styles (.btn, .btn-primary, etc.) są zdefiniowane w tailwind.config.js
 */

/* ==========================================================================
   TOPBAR & MENU STYLES
   ========================================================================== */

/* Body padding for sticky header - desktop */
body {
    padding-top: 7.5rem; /* topbar (h-14 = 3.5rem) + nav (h-16 = 4rem) */
}

/* Topbar container - sticky positioning */
.topbar-container {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
    background: white;
}

/* Main menu items styling (poziom 1) */
.menu-level-1:hover,
.menu-level-1.current {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.menu-level-1:hover .menu-arrow,
.menu-level-1.current .menu-arrow {
    border-color: var(--color-white) !important;
}

/* Category link (poziom 2) */
.category-link {
    display: block;
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    color: var(--color-primary);
    font-size: var(--text-lg);
    line-height: 1.4;
    padding: var(--spacing-md);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.category-link:hover {
    opacity: 0.8;
}

/* Category item link (poziom 3) */
.category-item-link {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-3xl);
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: var(--text-md);
    font-weight: var(--font-light);
    line-height: 1.6;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.category-item-link:hover {
    opacity: 0.8;
}

/* Main navigation */
.main-nav {
    position: relative;
}

/* Mega Menu - poziom 1 (główny wrapper) */
.mega-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    /* top is set in tailwind-input.css (7.5rem) and adjusted for mobile in media query below */
    margin: 0 !important;
    padding: 0 !important;
    background: white;
    z-index: 50;
    max-width: none !important;
    /* display is handled by tailwind-input.css - don't override here */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show mega menu on click only - via JS adding .menu-open class to LI */
/* Removed hover logic - only click to open */

/* Mega menu inner wrapper - poziom 1 */
.mega-menu > li {
    display: flex !important;
    gap: 40px;
    max-width: 1760px;
    margin: 0 auto;
    padding: 40px 80px;
    list-style: none;
    align-items: flex-start;
}

/* Kolumny kategorii - poziom 2 */
.mega-menu .mega-column {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    display: inline-flex;
}

/* Pojedyncza kategoria z linkami */
.mega-menu .category-section {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
}

/* Mega menu list resets */
.mega-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-menu ul li {
    margin-bottom: 0;
}

/* Submenu link styles moved to tailwind-input.css with classes .submenu-link-lvl2 and .submenu-link-lvl3 */

/* Ikonka strzałki dla menu items - rotation handled in tailwind-input.css via .menu-open class */

/* Responsive utilities - Tailwind already handles .lg:flex and .lg:hidden */

/* Search toggle button styles */
#searchToggle,
#mobileMenuToggle {
    cursor: pointer;
    border: none;
    background: transparent;
}

#searchToggle:focus,
#mobileMenuToggle:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Search input - ukryj ikonkę X w przeglądarce */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Navy/primary color - use bg-navy Tailwind class instead */

/* ==========================================================================
   MOBILE ONLY STYLES (max-width: 996px)
   ========================================================================== */
@media (max-width: 996px) {
    /* Hide top navy bar on mobile */
    .topbar-container > .h-14.bg-navy:first-child {
        display: none !important;
    }

    /* Mobile sticky header - only nav bar visible + padding for bottom bar */
    body {
        padding-top: 4rem !important; /* tylko wysokość nawigacji (h-16 = 4rem) */
        padding-bottom: 80px !important; /* miejsce na bottom bar */
    }

    /* Adjust mega menu position for mobile (no top bar) */
    .mega-menu {
        top: 4rem !important; /* tylko wysokość nawigacji (h-16 = 4rem) */
    }

    /* Adjust search mega menu position for mobile */
    .search-mega-menu {
        top: 4rem !important; /* tylko wysokość nawigacji (h-16 = 4rem) */
    }
    /* Mobile Bottom Bar - Fixed */
    .mobile-bottom-bar {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 10000;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        background: white;
    }

    .mobile-bottom-bar-btn {
        flex: 1 1 50%;
        width: 50%;
        padding: 16px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-decoration: none;
        transition: background-color var(--transition-fast);
        font-family: 'Inter', sans-serif;
    }

    .mobile-bottom-bar-btn i {
        font-size: 20px;
        flex-shrink: 0;
    }

    .mobile-bottom-bar-btn span {
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        line-height: 1.3;
        display: block;
        white-space: nowrap;
    }

    .mobile-bottom-bar-btn-contact {
        background-color: var(--color-primary);
        color: var(--color-white);
        border: none;
        cursor: pointer;
    }

    .mobile-bottom-bar-btn-contact:hover,
    .mobile-bottom-bar-btn-contact:focus, 
    .mobile-bottom-bar-btn-contact:active {
        opacity: .95;
        color:#fff;
    }

    .mobile-bottom-bar-btn-phone {
        background-color: var(--color-alarm);
        color: var(--color-white);
    }

    .mobile-bottom-bar-btn-phone:hover,
        .mobile-bottom-bar-btn-contact:focus, 

    .mobile-bottom-bar-btn-phone:active {
       opacity: .9;
       color:#fff;
    }

    /* ==========================================================================
       MOBILE SLIDE MENU STYLES
       ========================================================================== */

    /* Mobile Menu Overlay */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 88px; /* Zostaw miejsce na bottom bar */
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Mobile Menu Drawer */
    .mobile-menu-drawer {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: calc(100vh - 50px); /* Wysokość okna minus bottom bar */
        background-color: var(--color-white);
        z-index: 9999;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }

    .mobile-menu-drawer.active {
        left: 0;
    }

    /* Mobile Menu Container */
    .mobile-menu-container {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Mobile Menu Header */
    .mobile-menu-header {
        background-color: var(--color-white);
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2px solid var(--color-primary);
        flex-shrink: 0;
    }

    .mobile-menu-logo {
        flex: 0 0 auto;
    }

    .mobile-menu-logo img {
        height: 36px;
        width: auto;
    }

    .mobile-menu-header-buttons {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 0 0 auto;
    }

    .mobile-menu-search-btn,
    .mobile-menu-lang-btn,
    .mobile-menu-close-btn {
        background: transparent;
        border: none;
        color: var(--color-primary);
        cursor: pointer;
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity var(--transition-fast);
        font-weight: 400;
    }

    .mobile-menu-search-btn:hover,
    .mobile-menu-lang-btn:hover,
    .mobile-menu-close-btn:hover {
        opacity: 0.7;
    }

    /* Mobile language switcher dropdown */
    .mobile-language-switcher {
        position: static; /* Override relative positioning */
    }

    .mobile-language-switcher .language-switcher-menu {
        position: fixed !important; /* Fixed positioning for mobile */
        top: 60px !important; /* Below mobile menu header */
        right: 80px !important; /* Align with language button */
        left: auto !important;
        z-index: 10001 !important; /* Above mobile menu and other elements */
    }

    .mobile-menu-search-btn {
        padding: 0;
    }

    .mobile-menu-search-btn svg {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }

    .mobile-menu-close-btn {
        padding: 4px;
    }

    .mobile-menu-close-btn svg {
        width: 24px;
        height: 24px;
        stroke: var(--color-primary);
        stroke-width: 2;
        flex-shrink: 0;
    }

    .mobile-menu-lang-btn {
        font-size: 16px;
        font-weight: 700;
        font-family: 'Inter', sans-serif;
        text-transform: uppercase;
        padding: 4px 8px;
    }

    .mobile-menu-lang-btn span {
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
    }

    .mobile-menu-divider {
        color: #d1d5db;
        font-size: 16px;
        line-height: 1;
        font-weight: 300;
    }

    /* Mobile Menu Content */
    .mobile-menu-content {
        flex: 1;
        overflow: hidden;
        position: relative;
        background-color: var(--color-white);
        max-height: calc(100% - 88px);
        overflow-y: auto;
    }

    /* Mobile Menu Slides - unified structure: header + content */
    .mobile-menu-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* height: 100%; */
        background-color: var(--color-white);
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
    }

    .mobile-menu-slide.active {
        transform: translateX(0);
    }

    .mobile-menu-slide.slide-left {
        transform: translateX(-100%);
    }

    /* Level 0 slide stays in normal flow, submenu slides go over it */
    .mobile-menu-slide[data-level="0"] {
        position: relative;
        transform: none;
    }

    /* Submenu slide level 1 - starts from top, replaces main header */
    .mobile-menu-slide[data-level="1"] {
        position: fixed;
        top: 0; /* Zastępuje header - od samej góry */
        left: 0;
        width: 100%;
        height: calc(100vh - 88px); /* Wysokość okna minus bottom bar (88px) */
        z-index: 10001;
    }

    /* Submenu slide level 2 - starts from top */
    .mobile-menu-slide[data-level="2"] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100vh - 88px); /* Wysokość okna minus bottom bar */
        z-index: 10001;
    }

    /* Mobile Slide Content - wrapper with padding and gap */
    .mobile-menu-slide-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 20px; /* Horizontal padding */
        overflow: hidden;
    }

    /* Level 0: top-buttons + gap + scroll */
    .mobile-menu-slide[data-level="0"] .mobile-menu-slide-content {
        gap: 30px;
        padding-top: 0;
    }

    /* Level 1+: just scroll, padding-top to align with level 0 scroll start */
    .mobile-menu-slide[data-level="1"] .mobile-menu-slide-content,
    .mobile-menu-slide[data-level="2"] .mobile-menu-slide-content {
        padding-top: 30px; /* Same as level 0 first element top */
    }

    /* Mobile Menu Scroll Area */
    .mobile-menu-scroll {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0;
    }

    /* Top buttons section - only on level 0 */
    .mobile-menu-top-buttons {
        padding: 0;
        padding-top: 30px; /* Top padding dla oddechu od headera */
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        flex-shrink: 0;
    }

    /* Mobile Slide Header - all submenu slides (1, 2, 3...) have back + title + close */
    .mobile-menu-slide-header {
        background-color: var(--color-white);
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2px solid var(--color-primary);
        flex-shrink: 0;
        gap: 16px;
    }

    .mobile-menu-back {
        background: transparent;
        border: none;
        color: var(--color-primary);
        cursor: pointer;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        transition: opacity var(--transition-fast);
        flex-shrink: 0;
    }

    .mobile-menu-back:hover {
        opacity: 0.7;
    }

    .mobile-menu-back i {
        font-size: 20px;
    }

    .mobile-menu-slide-title {
        color: var(--color-primary);
        font-size: 18px;
        font-weight: 700;
        font-family: 'Inter', sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        flex: 1;
        text-align: center;
        margin: 0;
    }

    /* Close button in slide header uses same styles as main header */
    .mobile-menu-slide-close {
        background: transparent;
        border: none;
        color: var(--color-primary);
        cursor: pointer;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity var(--transition-fast);
        flex-shrink: 0;
    }

    .mobile-menu-slide-close:hover {
        opacity: 0.7;
    }

    .mobile-menu-slide-close svg {
        width: 20px;
        height: 20px;
        stroke: var(--color-primary);
        stroke-width: 2;
    }

    /* Mobile Menu List - used by both level 0 and submenu */
    .mobile-menu-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Menu list - no padding (padding on slide) */
    .mobile-menu-list {
        padding: 0;
    }

    /* Mobile Menu Item - used by both level 0 and submenu */
    .mobile-menu-item {
        margin-bottom: 25px;
    }

    .mobile-menu-item:last-child {
        margin-bottom: 0;
    }

    /* Submenu items (level 1+) - currently disabled
    .mobile-menu-slide[data-level="1"] .mobile-menu-item,
    .mobile-menu-slide[data-level="2"] .mobile-menu-item {
        margin-bottom: 0;
        border-bottom: 1px solid #f5f5f5;
        padding: 20px 40px;
    }
    */

    .mobile-menu-slide[data-level="1"] .mobile-menu-item:last-child,
    .mobile-menu-slide[data-level="2"] .mobile-menu-item:last-child {
        border-bottom: none;
    }

    /* Level 0 - Main menu items */
    .mobile-menu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0;
        background: transparent;
        border: none;
        text-align: left;
        cursor: pointer;
        transition: all var(--transition-fast);
        font-family: 'Inter', sans-serif;
        color: var(--color-primary);
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .mobile-menu-link:hover {
        opacity: 0.7;
    }

    .mobile-menu-link i {
        color: var(--color-primary);
        font-size: 16px;
        flex-shrink: 0;
        margin-left: 8px;
    }

    /* Level 0 - Direct links without children */
    .mobile-menu-direct-link {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0;
        color: var(--color-primary);
        font-size: 16px;
        font-weight: 700;
        font-family: 'Inter', sans-serif;
        text-decoration: none;
        transition: all var(--transition-fast);
        text-transform: uppercase;
        text-align: left;
    }

    .mobile-menu-direct-link:hover {
        opacity: 0.7;
    }

    /* Submenu items Level 1 - semi-bold, NO uppercase */
    .mobile-submenu-category-link,
    .mobile-submenu-direct-link,
    .mobile-submenu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0;
        background: transparent;
        border: none;
        text-align: left;
        cursor: pointer;
        transition: all var(--transition-fast);
        font-family: 'Inter', sans-serif;
        color: var(--color-primary);
        font-size: 16px;
        font-weight: 600;
        text-transform: none;
    }

    .mobile-submenu-link i.fa-chevron-right {
        color: var(--color-primary);
        font-size: 16px;
        flex-shrink: 0;
        margin-left: 8px;
    }

    /* Submenu items Level 2 - regular weight */
    .mobile-submenu-child-link,
    .mobile-submenu-link-deep {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0;
        background: transparent;
        border: none;
        text-align: left;
        cursor: pointer;
        transition: all var(--transition-fast);
        font-family: 'Inter', sans-serif;
        color: var(--color-primary);
        font-size: 16px;
        font-weight: 400;
        text-transform: none;
    }

    .mobile-submenu-category-link:hover,
    .mobile-submenu-direct-link:hover,
    .mobile-submenu-child-link:hover,
    .mobile-submenu-link:hover,
    .mobile-submenu-link-deep:hover {
        opacity: 0.7;
    }

    /* Show chevrons only for items with children in submenu */
    .mobile-submenu-direct-link i,
    .mobile-submenu-child-link i,
    .mobile-submenu-link-deep i {
        display: none !important;
    }

    /* Mobile Menu Footer Section */
    .mobile-menu-footer {
        padding: 0;
        padding-top: 30px;
        padding-bottom: 40px; /* Bottom padding */
        display: flex;
        flex-direction: column;
        gap: 30px;
        background-color: var(--color-white);
        border-top: 1px solid var(--color-border-light);
        flex-shrink: 0;
    }

    .mobile-menu-footer-link {
        color: var(--color-primary);
        font-size: 12px;
        font-weight: 500;
        font-family: 'Inter', sans-serif;
        text-decoration: none;
        transition: opacity var(--transition-fast);
    }

    .mobile-menu-footer-link:hover {
        opacity: 0.7;
    }

    .mobile-menu-footer-icons {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: space-between;
    }

    .mobile-menu-footer-icon {
        color: var(--color-primary);
        font-size: 14px;
        text-decoration: none;
        transition: opacity var(--transition-fast);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-menu-bip-icon {
        height: 14px;
        width: auto;
    }

    .mobile-menu-footer-icon:hover {
        opacity: 0.7;
    }

    .mobile-menu-footer-divider {
        color: var(--color-primary);
        font-size: 12px;
        font-weight: 500;
    }

    /* Mobile Menu Bottom Buttons */
    .mobile-menu-bottom {
        padding: 24px;
        background-color: var(--color-white);
        border-top: 1px solid var(--color-border);
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex-shrink: 0;
    }

    .mobile-menu-btn-primary,
    .mobile-menu-btn-secondary {
        width: 100%;
        padding: 16px 24px;
        border-radius: 50px;
        font-size: 16px;
        font-weight: 600;
        font-family: 'Inter', sans-serif;
        text-align: center;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: all var(--transition-fast);
        cursor: pointer;
    }

    .mobile-menu-btn-primary {
        background-color: var(--color-primary);
        color: var(--color-white);
        border: 2px solid var(--color-primary);
        order: 2;
    }

    .mobile-menu-btn-primary:hover {
        background-color: var(--color-primary-hover);
        border-color: var(--color-primary-hover);
    }

    .mobile-menu-btn-primary i {
        font-size: 20px;
    }

    .mobile-menu-btn-secondary {
        background-color: var(--color-white);
        color: var(--color-primary);
        border: 2px solid var(--color-primary);
        order: 1;
    }

    .mobile-menu-btn-secondary:hover {
        background-color: var(--color-primary-light);
    }

    /* Hide mobile menu on desktop */
    .mobile-menu-overlay,
    .mobile-menu-drawer {
        display: block;
    }
}

/* Desktop - hide mobile bottom bar and mobile menu */
@media (min-width: 997px) {
    .mobile-bottom-bar {
        display: none !important;
    }

    /* Hide mobile menu on desktop */
    .mobile-menu-overlay,
    .mobile-menu-drawer {
        display: none !important;
    }

    /* Ensure desktop shows top bar */
    .topbar-container > .h-14.bg-navy:first-child {
        display: block !important;
    }
}

/* ==========================================================================
   RESPONSIVE HEADER - Progressive scaling for desktop
   Desktop only (min-width: 997px) - mobile remains unchanged
   ========================================================================== */

/* Reduction for screens < 1500px */
@media (max-width: 1499px) and (min-width: 997px) {
    .menu-item-lvl0 {
        padding-left: 14px !important;
        padding-right: 14px !important;
        font-size: 14px !important;
    }

    .btn-topbar {
        height: 33px !important;
        padding: 3px 9px !important;
        font-size: 14px !important;
        gap: 5px !important;
    }

    nav ul {
        gap: 12px !important;
    }

    .topbar-buttons {
        gap: 10px !important;
    }
}

/* Further reduction for screens < 1200px */
@media (max-width: 1199px) and (min-width: 997px) {
    .menu-item-lvl0 {
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 13px !important;
    }

    .btn-topbar {
        height: 31px !important;
        padding: 2px 8px !important;
        font-size: 13px !important;
        gap: 4px !important;
    }

    nav ul {
        gap: 10px !important;
    }

    .topbar-buttons {
        gap: 8px !important;
    }
}


@media all and (min-width: 991px){
    .header-logo{height:50px;}
}