/* Navbar CSS - bez Tailwind */

/* ZAPOBIEGAJ ZMIANOM POZYCJI NAVBAR - ABSOLUTNIE STAŁA POZYCJA */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}

/* Upewnij się, że żadne style nie wpływają na pozycję navbar */
* {
    box-sizing: border-box;
}

/* Navbar musi być całkowicie niezależny od innych elementów */

/* ZAPOBIEGAJ JAKIMKOLWIEK ZMIANOM POZYCJI NAVBAR PRZEZ INNE STYLE */

/* Upewnij się, że żadne style z innych plików nie wpływają na navbar */
body .navbar,
html .navbar,
* .navbar,
nav.navbar,
nav.universal-navbar,
.navbar[style] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 12px 24px !important;
    width: 100% !important;
    z-index: 10010 !important;
    transform: translateZ(0) !important;
}

/* Upewnij się, że navbar buttons mają zawsze te same style niezależnie od strony */
/* Najpierw najbardziej specyficzne selektory dla getStartedBtn */
body.products-page #getStartedBtn,
html.products-page #getStartedBtn,
body #getStartedBtn,
html #getStartedBtn,
#getStartedBtn.navbar-button,
#getStartedBtn {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 21px !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
    padding: 0 16px !important;
    height: 32px !important;
}

/* Ikony Font Awesome NIE powinny mieć nadpisanego font-family */
#getStartedBtn span {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 21px !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
}

/* Teraz dla wszystkich navbar-button */
body.products-page .navbar-button,
html.products-page .navbar-button,
body .navbar-button,
html .navbar-button,
* .navbar-button,
.navbar-button {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 21px !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
    padding: 0 16px !important;
    height: 32px !important;
}

/* Tekst w przyciskach (span) */
.navbar-button span {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 21px !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
}

/* Ikony Font Awesome - NIE nadpisuj font-family, pozwól Font Awesome używać swojego fontu */
.navbar-button i,
.navbar-button i.fas,
.navbar-button i.far,
.navbar-button i.fab,
.navbar-button i.fal,
.navbar-button i.fad,
#getStartedBtn i,
#getStartedBtn i.fas,
#getStartedBtn i.far,
#getStartedBtn i.fab,
#getStartedBtn i.fal,
#getStartedBtn i.fad {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 5 Brands", "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands" !important;
    font-weight: 900 !important;
}

/* Główny kontener navbar */
.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10010 !important;
    padding: 12px 24px !important;
    margin: 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease !important;
    /* CAŁKOWICIE ZABLOKUJ JAKIEKOLWIEK ZMIANY POZYCJI */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 12px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 12px !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0.5) 85%, rgba(0, 0, 0, 0) 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0.5) 85%, rgba(0, 0, 0, 0) 100%) !important;
    isolation: isolate !important; /* Tworzy nowy stacking context, ale nie blokuje dropdown */
    pointer-events: auto !important;
    transform: translateZ(0) !important; /* Tworzy nowy stacking context i zapobiega reflow */
    will-change: auto !important; /* Nie optymalizuj pozycji */
    box-sizing: border-box !important;
}


/* Kontener wewnętrzny navbar */
.navbar-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10020 !important;
    pointer-events: auto !important;
}

/* Logo section */
.navbar-logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.navbar-logo-div {
    width: 32px;
    height: 32px;
    background-color: rgb(17, 24, 39);
    -webkit-mask-image: url(/src/assets/images/ui/logo.png);
    mask-image: url(/src/assets/images/ui/logo.png);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: transform 0.3s ease;
}

.navbar-logo-link:hover .navbar-logo-div {
    transform: scale(1.1);
}

.navbar-logo-text {
    font-family: 'High Speed', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: rgb(17, 24, 39);
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

/* Desktop menu */
.navbar-desktop-menu {
    display: none;
    align-items: center;
    gap: 12px;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    position: relative;
    z-index: 10020 !important; /* Wyżej niż navbar */
}

@media (min-width: 769px) {
    .navbar-desktop-menu {
        display: flex;
    }
}

/* Navbar buttons */
.navbar-button {
    padding: 0 16px;
    height: 32px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    color: rgb(17, 24, 39);
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    overflow: visible !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.navbar-button:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.navbar-button i {
    color: rgb(17, 24, 39);
}

/* Get Started dropdown */
.navbar-get-started-container {
    position: relative;
    z-index: 10020 !important; /* Wyżej niż navbar (10010) */
    overflow: visible !important;
    pointer-events: auto !important;
}

.navbar-get-started-container:hover {
    z-index: 10020 !important; /* Wyżej niż navbar (10010) */
}

.navbar-get-started-container:hover .navbar-get-started-dropdown {
    z-index: 10030 !important;
}

/* Chevron rotation */
#getStartedChevron {
    transition: transform 0.3s ease;
    font-size: 12px;
}

.navbar-get-started-dropdown {
    position: absolute;
    top: calc(100% + 30px); /* Przesunięty niżej, żeby był całkowicie poza obszarem mask-image navbar */
    left: 0;
    margin-top: 0; /* Usunięty margin-top, bo używamy calc() */
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    min-width: 180px;
    z-index: 10030 !important; /* Wyżej niż navbar (10010) i kontener (10020) */
    display: none;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    backdrop-filter: none !important; /* Bez blur, żeby był wyraźny */
    -webkit-backdrop-filter: none !important;
    transform: translateZ(0) !important; /* Tworzy nowy stacking context */
    will-change: transform !important;
    isolation: isolate !important; /* Izoluje od mask-image navbar */
    mask-image: none !important; /* Usuń mask-image, żeby nie był zasłonięty */
    -webkit-mask-image: none !important;
}

/* Fixed dropdown poza navbar (poza kontekstem mask-image) */
.navbar-get-started-dropdown-fixed {
    position: fixed !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    min-width: 180px !important;
    width: fit-content !important;
    max-width: none !important;
    z-index: 10030 !important;
    display: none;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

.navbar-get-started-dropdown-fixed .navbar-dropdown-item {
    width: 100% !important;
    min-width: 180px !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.navbar-get-started-container:hover .navbar-get-started-dropdown,
.navbar-get-started-dropdown.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.navbar-dropdown-item {
    display: flex;
    padding: 12px 16px;
    color: rgb(17, 24, 39);
    text-decoration: none;
    align-items: center;
    gap: 8px;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 21px !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
}

.navbar-dropdown-item:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.navbar-dropdown-item:last-child {
    border-bottom: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.navbar-dropdown-item:hover {
    background-color: #f9fafb;
}

.navbar-dropdown-item i {
    color: rgb(17, 24, 39);
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 5 Brands", "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands" !important;
    font-weight: 900 !important;
}

/* Upewnij się, że dropdown items mają zawsze te same style niezależnie od strony */
body.products-page .navbar-dropdown-item,
html.products-page .navbar-dropdown-item,
body .navbar-dropdown-item,
html .navbar-dropdown-item,
* .navbar-dropdown-item,
.navbar-dropdown-item,
.navbar-dropdown-item span {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 21px !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
}

/* Fixed dropdown (poza navbar) */
.navbar-get-started-dropdown-fixed .navbar-dropdown-item,
.navbar-get-started-dropdown-fixed .navbar-dropdown-item span {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 21px !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
}

.navbar-get-started-dropdown-fixed .navbar-dropdown-item i {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 5 Brands", "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands" !important;
    font-weight: 900 !important;
}

/* Hamburger button */
.navbar-hamburger-btn {
    display: flex;
    color: rgb(17, 24, 39);
    font-size: 20px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

@media (min-width: 769px) {
    .navbar-hamburger-btn {
        display: none;
    }
}

.navbar-hamburger-btn:hover {
    color: rgb(17, 24, 39);
}

/* Mobile menu button margin */
.navbar-button-margin {
    margin-left: 8px;
}

/* Universal Footer */
.universal-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10010;
    padding: 12px 24px;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0) 100%); /* Większe rozpraszanie blur */
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0) 100%); /* Większe rozpraszanie blur */
    display: flex;
    align-items: center; /* Wycentrowanie w wysokości */
    justify-content: center; /* Wycentrowanie w poziomie */
    box-sizing: border-box;
}

.universal-footer-inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 8px 16px;
    padding-top: 20px; /* Więcej niżej */
    text-align: center;
    color: rgba(75, 85, 99, 0.6);
    font-size: clamp(0.625rem, 1.5vw, 0.75rem);
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center; /* Wycentrowanie w wysokości */
    justify-content: center; /* Wycentrowanie w poziomie */
    box-sizing: border-box;
}

/* Ukryj navbar w trybie mobilnym */
@media (max-width: 768px) {
    .navbar,
    nav.navbar,
    nav.universal-navbar,
    body .navbar,
    html .navbar,
    * .navbar,
    .navbar[style] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}