/* =========================================
   BAZOWY HEADER (Dla wszystkich podstron)
   ========================================= */
/* ---> TEGO BLOKU CI BRAKOWAŁO! <--- */
.qbiton-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 15px 20px !important;
    background-color: var(--color-black) !important;
    border-bottom: 1px solid var(--color-qbi-gray) !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* =========================================
   MODYFIKATOR DLA PODSTRON (Rozwijanie w dół)
   ========================================= */
.qbiton-header:not(.qbiton-cross-layout) {
    flex-direction: column !important; /* Układamy logo i menu w pionie */
    align-items: flex-start !important; /* Wszystko do lewej */
    height: auto !important;
    transition: background 0.3s ease;
}

/* Menu na podstronach - startuje od zera wysokości */
.qbiton-header:not(.qbiton-cross-layout) .qbiton-menu {
    flex-direction: column !important;
    width: auto !important;
    max-height: 0;
    overflow: hidden !important;
    opacity: 0;
    margin-top: 0 !important;
    padding-left: 0 !important;
    transition: max-height 0.6s ease-in-out, opacity 0.4s ease-in-out, margin-top 0.4s ease !important;
}

/* Otwarcie menu na podstronach */
.qbiton-header:not(.qbiton-cross-layout).is-open .qbiton-menu {
    max-height: 1000px;
    opacity: 1;
    margin-top: 20px !important;
    pointer-events: auto !important;
}

/* Standardowy wygląd logo na podstronach */
.qbiton-logo-container {
    position: relative;
    width: 60px !important;
    height: 60px !important;
    margin: 0 !important;
    flex-shrink: 0;
    border: 5px solid var(--color-qbi-indigo) !important; /* Twoje 5px zachowane! */
    border-radius: 10px !important;
    overflow: hidden !important;
    background-color: var(--color-black) !important;
}

/* Baza kontenera menu */
.qbiton-menu {
    display: flex !important;
    gap: 15px;
    z-index: 5 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out !important;
}

/* --- STYLIZACJA POJEDYNCZEGO PRZYCISKU --- */
.qbi-btn {
    margin: 0 !important;
    background-color: var(--color-qbi-indigo) !important;
    color: var(--color-qbi-turquoise) !important;
    padding: 12px 24px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    border: 2px solid var(--color-qbi-pink) !important;
    box-shadow: 0 0 10px var(--color-qbi-pink) !important; 
    white-space: nowrap !important;
    
    /* --- NOWE PRZYPRAWY: IDEALNE CENTROWANIE --- */
    display: flex !important;
    justify-content: center !important; /* Środek w poziomie */
    align-items: center !important;     /* Środek w pionie */
    text-align: center !important;      /* Awaryjny bezpiecznik */
    
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.1),
                background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* Twój nowy, pomarańczowy hover! */
.qbi-btn:hover {
    background-color: var(--color-qbi-turquoise) !important;
    color: var(--color-qbi-indigo) !important;
    border: 2px solid var(--color-qbi-orange) !important;
    box-shadow: 0 0 25px var(--color-qbi-orange) !important;
}

/* Przycisk Zablokowany */
.qbi-btn-disabled {
    margin: 0 !important;
    background-color: var(--color-qbi-gray) !important;
    color: var(--color-qbi-white) !important;
    padding: 12px 24px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    border: 2px solid var(--color-white) !important;
    box-shadow: 0 0 10px var(--color-qbi-gray) !important; 
    white-space: nowrap !important;
    cursor: not-allowed; /* Kursor zmienia się na znak zakazu */
    
    /* --- NOWE PRZYPRAWY: IDEALNE CENTROWANIE --- */
    display: flex !important;
    justify-content: center !important; /* Środek w poziomie */
    align-items: center !important;     /* Środek w pionie */
    text-align: center !important;      /* Awaryjny bezpiecznik */
    
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.1),
                background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;


}

/* Brak efektu hover, bo jest wyłączony */
.qbi-btn-disabled:hover {
    background-color: var(--color-black) !important;
    color: var(--color-qbi-gray) !important;
    border: 2px solid var(--color-white) !important;
    box-shadow: 0 0 25px var(--color-qbi-indigo) !important;
    cursor: not-allowed; /* Kursor zmienia się na znak zakazu */
    display: inline-block;
}

/* --- TOOLTIP (UKRYTY DOMYŚLNIE) --- */
.qbi-btn-disabled::after {
    content: "UNDER CONSTRUCTION"; /* Treść tooltipu */
    position: absolute;
    bottom: 125%; /* Nad przyciskiem */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: var(--color-qbi-indigo);
    color: var(--color-qbi-turquoise);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    border: 1px solid var(--color-qbi-turquoise);
}

/* --- STRZAŁKA TOOLTIPU --- */
.qbi-btn-disabled::before {
    content: "";
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: var(--color-qbi-turquoise) transparent transparent transparent;
    opacity: 0;
    transition: all 0.3s ease;
}

/* --- AKTYWACJA NA HOVER --- */
.qbi-btn-disabled:hover::after,
.qbi-btn-disabled:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* =========================================
   KLASA: .qbiton-cross-layout 
   (Tylko dla index.html - Magia Krzyża!)
   ========================================= */

.qbiton-cross-layout {
    height: 100vh !important; /* To uziemia środek na środku ekranu! */
    width: 100vw !important;
    justify-content: center !important;
    border-bottom: none !important;
    overflow: hidden !important; /* Zapobiega pojawianiu się pasków przewijania */
}

.qbiton-cross-layout .qbiton-cross-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

/* Wielkie logo w centrum Krzyża */
.qbiton-cross-layout .qbiton-logo-container {
    width: 120px !important;
    height: 120px !important;
    border-radius: 20px !important;
    border: 5px solid var(--color-qbi-indigo) !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

/* Uwalniamy menu do lotu we wszystkie strony */
.qbiton-cross-layout .qbiton-menu {
    position: absolute !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important; 
}

/* Otwarcie menu (Nasłuchuje JS-a, a nie najechania myszką) */
.qbiton-cross-layout.is-open .qbiton-menu {
    opacity: 1 !important;
    pointer-events: auto !important; 
}
.qbiton-cross-layout.is-open .qbi-btn {
    pointer-events: auto !important; 
    cursor: pointer !important;
}

.qbiton-cross-layout.is-open .qbi-btn-disabled {
    pointer-events: auto !important; 
    cursor: pointer !important;
}

/* --- KIERUNKI WYSTRZAŁU --- */

/* LEWO - Teraz obsługuje też przycisk disabled (MUD) */
.qbiton-cross-layout .menu-left { 
    right: 50% !important; 
    padding-right: 80px !important; 
    flex-direction: row-reverse !important; 
}

/* To sprawia, że MUD chowa się pod logo tak samo jak DESIGN i CLOUD */
.qbiton-cross-layout .menu-left .qbi-btn,
.qbiton-cross-layout .menu-left .qbi-btn-disabled { 
    transform: translateX(150px) !important; 
}
/* PRAWO */
.qbiton-cross-layout .menu-right { left: 50% !important; padding-left: 80px !important; flex-direction: row !important; }
.qbiton-cross-layout .menu-right .qbi-btn { transform: translateX(-150px) !important; }

/* GÓRA */
.qbiton-cross-layout .menu-top { bottom: 50% !important; padding-bottom: 80px !important; flex-direction: column-reverse !important; }
.qbiton-cross-layout .menu-top .qbi-btn { transform: translateY(150px) !important; }

/* DÓŁ */
.qbiton-cross-layout .menu-bottom { top: 50% !important; padding-top: 80px !important; flex-direction: column !important; }
.qbiton-cross-layout .menu-bottom .qbi-btn { transform: translateY(-150px) !important; }

.qbiton-cross-layout .menu-bottom .qbi-btn-disabled { 
    transform: translateY(-150px) !important; 
}

/* POWRÓT NA MIEJSCE (RESET - wyjeżdżają zza logo) */
/* Wszystkie przyciski (w tym MUD) wracają na swoje pozycje w menu */
.qbiton-cross-layout.is-open .qbi-btn,
.qbiton-cross-layout.is-open .qbi-btn-disabled { 
    transform: translate(0, 0) !important; 
}

/* Skalowanie na małych ekranach komórek */
@media (max-width: 768px) {
    .qbiton-cross-layout .qbiton-cross-wrapper { transform: scale(0.65) !important; }
}

/* =========================================
   ANIMACJA LOTU LOGO (Przejście na podstronę)
   ========================================= */

/* 1. Dajemy logo zdolność płynnej zmiany rozmiaru i pozycji */
.qbiton-cross-layout .qbiton-logo-container {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 2. Co się dzieje, gdy włączymy klasę lotu (.is-flying) */
.qbiton-cross-layout.is-flying .qbiton-logo-container {
    /* Docelowy rozmiar logo na podstronach */
    width: 60px !important;
    height: 60px !important;
    border-radius: 10px !important;
    
    /* Magiczna włoska matematyka: 
       Przesuwamy z samego środka w docelowe miejsce */
    transform: translate(calc(50px - 50vw), calc(45px - 50vh)) !important;
}

/* 3. Wyłączamy skalowanie na telefonach podczas lotu, żeby logo idealnie trafiło w róg */
.qbiton-cross-layout.is-flying .qbiton-cross-wrapper {
    transform: scale(1) !important;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* =========================================
   STAN ACTIVE (Twoja różowa magia)
   ========================================= */
.qbi-btn.active {
    background-color: var(--color-qbi-pink) !important;
    color: var(--color-black) !important;
    border-color: var(--color-white) !important;
    box-shadow: 0 0 25px var(--color-qbi-pink) !important;
}

.logo-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative; /* Trzyma wszystko w ryzach */
}

.logo-static, .logo-animated {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}

.logo-animated {
    opacity: 0; /* Wideo domyślnie ukryte */
}

/* Włoska magia Mouse Over na podstronach */
.qbiton-logo-container:hover .logo-static {
    opacity: 0;
}

.qbiton-logo-container:hover .logo-animated {
    opacity: 1;
}

/* =========================================
   ANIMACJA POWROTU (Z podstrony do Index)
   ========================================= */

/* =========================================
   ANIMACJA POWROTU (Lot do środka)
   ========================================= */
.qbiton-header.is-returning .qbiton-logo-container {
    width: 120px !important;
    height: 120px !important;
    border-radius: 20px !important;
    
    /* Precyzyjna matematyka powrotu z rogu (20px od lewej, 15px od góry) na środek */
    transform: translate(calc(50vw - 60px - 20px), calc(50vh - 60px - 15px)) !important;
    
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 9999 !important;
}

/* Ukrywamy resztę paska podczas powrotu */
.qbiton-header.is-returning .qbiton-menu {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =========================================
   UKŁAD APLIKACJI (Podstrony - Dwa Panele)
   ========================================= */

/* Reset marginesów bazy, żeby układ przylegał do krawędzi */
body { margin: 0; padding: 0; overflow: hidden; }

.qbiton-app-layout {
    display: flex;
    height: 100vh; /* Zajmuje dokładnie 100% wysokości okna przeglądarki */
    width: 100vw;
    background-color: var(--color-black);
}

/* --- LEWY PANE (SIDEBAR) --- */
.qbiton-sidebar {
    width: 320px; /* Szerokość menu */
    background-color: #080a14; /* Delikatnie inny odcień czerni/granatu dla odcięcia */
    border-right: 1px solid var(--color-qbi-indigo); /* Subtelna linia granicy */
    display: flex;
    flex-direction: column;
    padding: 30px;
    box-sizing: border-box;
    flex-shrink: 0; /* Zabrania zwężania sidebara */
    overflow-y: auto; /* Jak dodasz dużo opcji, menu będzie można przewinąć */
}

.sidebar-header {
    margin-bottom: 50px; /* Odstęp między logo a pierwszym guzikiem */
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Odstępy między guzikami */
}

/* Guziki w sidebarze rozciągają się na pełną szerokość menu */
.sidebar-menu .qbi-btn {
    width: 100% !important; 
    box-sizing: border-box;
}

/* --- PRAWY PANE (CONTENT) --- */
.qbiton-content {
    flex-grow: 1; /* Zajmuje całą dostępną resztę ekranu */
    padding: 50px; /* Marginesy wewnątrz dla czytelności tekstu */
    overflow-y: auto; /* TO JEST KLUCZ: Prawy panel scrolluje się niezależnie! */
    box-sizing: border-box;
}

/* --- RESPONSIVNOŚĆ (Dla telefonów komórkowych) --- */
@media (max-width: 768px) {
    .qbiton-app-layout { flex-direction: column; }
    .qbiton-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--color-qbi-indigo); padding: 20px; }
    .sidebar-header { margin-bottom: 20px; }
    .sidebar-menu { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .sidebar-menu .qbi-btn { width: auto !important; }
}