* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 19999;
    pointer-events: auto;
}

.cover.hidden {
    display: none;
}

.cover img {
    position: absolute;
    top: 51.5%;
    left: 52.5%;
    transform: translate(-50%, -50%);
    max-width: 108%;
    max-height: auto;
    object-fit: contain;
}

body {
    background-color: #000;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

.invisible-button-container {
    position: fixed;
    z-index: 10001; /* Mniej niż widżet bota */
}

.invisible-button {
    position: fixed;
    width: 162px;
    height: 36px;
    bottom: 62px;
    left: 118px;
    background-color: rgba(255, 0, 0, 0.2); /* Niewidzialny */
    border: none;
    border-radius: 25px;
    pointer-events: auto; /* Przepuszcza kliknięcia do elementów pod spodem */
    z-index: 10000; /* Nad widgetem bota */
}
.main-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 95vh;
    border: 0.3vw solid #000eff;
    padding: 1vw;
    background-color: rgba(0, 0, 0, 0.9);
    position: relative;
    margin: 1vw;
    box-shadow: 0 0 2vw #000eff;
    flex-wrap: wrap;
    overflow: hidden;
}

.robot-section {
    flex: 1 1 30vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vw;
    max-width: 100%;
    margin-top: -1%; /* Przesuwa w dół */
    margin-left: -19%; /* Przesuwa w prawo */
    position: relative; /* Aby z-index działał */
    z-index: 1; /* Robot na niższej warstwie */

}
.robot-image {
    width: 30vw; /* Wielkość zależna od szerokości okna przeglądarki */
    filter: drop-shadow(0px 0px 1vw #000eff);
    transition: width 0.3s ease;

}

#bot-eyes {
    position: absolute;
    width: 30vw; /* Dopasowane do robota */
    height: auto;
    top: 50%; /* Dopasowanie do środka robota */
    left: 50%; /* Dopasowanie do środka robota */
    transform: translate(-50%, -50%); /* Wyśrodkowanie obrazu oczu */
    z-index: 7; /* Nad robotem, ale pod innymi warstwami */
    opacity: 0; /* Domyślnie ukryte */
    transition: opacity 0.5s ease-in-out; /* Płynne włączanie/wyłączanie */
}
.pizza-image {
    width: 70vw; /* Wielkość zależna od szerokości okna przeglądarki */
    filter: drop-shadow(0px 0px 1vw #000eff);
    transition: width 0.3s ease;
    margin-top: -15%; /* Przesuwa w dół */
    margin-left: -60%; /* Przesuwa w prawo */

}
.pizza-section {
    flex: 1 1 50vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vw;
    max-width: 100%;

    position: relative; /* Aby z-index działał */
    z-index: 1; /* Robot na niższej warstwie */

}



.content-section {
    flex: 1 2 10vw;
    padding: 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
    max-width: 100%;
margin-top: -45%;
    margin-left: -82%;
    position: relative; /* Aby z-index działał */
    z-index: 20; /* Robot na niższej warstwie */
}

/* Przyciski z grafikami */
.menu-button {
width: 15vw;
        height: 5vw;
    filter: drop-shadow(0px 0px 1vw #000eff);
    background-size: contain;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    padding: 0; /* Usunięcie wewnętrznych marginesów */
    transition: transform 0.3s ease, opacity 0.3s ease;
    margin-top: -0%;
    margin-left: 80%;
display: inline-block; /* Zapewnienie działania wymiarów */

}
.menu-button:hover {
    animation: shake 0.5s ease-in-out infinite; /* Animacja ruchu */
}

/* Definicja animacji */
@keyframes shake {
    0%, 100% {
        transform: translateX(0); /* Pozycja początkowa */
    }
    50% {
        transform: translateX(10px); /* Przesunięcie w prawo */
    }
}

/* Każdy przycisk z osobną grafiką */
.pizza-btn {
    background-image: url('pizzebtn.webp');
}

.hamburger-btn {
    background-image: url('daniabtn.webp');
}

.promo-btn {
    background-image: url('zapiekankibtn.webp');
}

.salad-btn {
    background-image: url('salatkibtn.webp');
}

.drink-btn {
    background-image: url('napojebtn.webp');
}

.dessert-btn {
    background-image: url('promocjebtn.webp');
}

.popup-window {
    position: fixed;
    right: 20%; /* Początkowa pozycja */
    top: 6%; /* Początkowa pozycja */
    width: 0; /* Startowa szerokość */
    height: 0; /* Startowa wysokość */
    background: rgba(0, 123, 255, 0.9);
    color: white;
    font-size: 1vw;
    border: 0.2vw solid #00c3ff;
    border-radius: 0.5vw;
    opacity: 0; /* Ukryte na starcie */
    overflow: hidden; /* Ukrycie zawartości */
    box-shadow: 0 0 1.5vw #00c3ff;
    transition: width 0.3s ease, height 0.3s ease 0.3s, opacity 0.3s ease; /* Najpierw szerokość, potem wysokość */
    z-index: 500;
}

.popup-window.open {
    width: 50vw; /* Otwieranie na szerokość */
visibility: visible;
    opacity: 1; /* Widoczne */
    padding: 2vw; /* Padding w stanie otwartym */
    overflow: auto; /* Przewijanie w razie potrzeby */
    transition: width 0.3s ease, height 0.3s ease 0.3s; /* Najpierw szerokość, potem wysokość */
}

.popup-window.open .popup-image {
    visibility: visible; /* Widoczne tylko w otwartych popupach */
opacity: 1
}



/* Specyficzne animacje dla każdego okna */
.popup-window-1 {
    top: 7.2%; /* Rozwija się tylko w dół */
}

.popup-window-1.open {
    height: 72vh !important; /* Całe okno rozwija się w dół */
    transform: translate( 00%, 00%);
}

.popup-window-2 {
    top: 21vh; /* Wyższe położenie początkowe */
}

.popup-window-2.open {
    height: 72vh !important; /* Więcej w dół, mniej w górę */
    transform: translate(00%, -19.2%);
}

.popup-window-3 {
    top: 36vh; /* Środek ekranu */
}

.popup-window-3.open {
    height: 72vh !important; /* Równe rozwijanie w górę i w dół */
    transform: translate(00%, -40%);
}

.popup-window-4 {
    top: 50vh; /* Jeszcze niżej */
}

.popup-window-4.open {
    height: 72vh !important; /* Więcej w górę, mniej w dół */
    transform: translate(-0%, -59.5%);
}

.popup-window-5 {
    top: 64vh; /* Blisko dolnej części */
}

.popup-window-5.open {
    height: 72vh !important; /* Głównie w górę */
    transform: translate(0%, -79%);
}

.popup-window-6 {
    top: 78vh; /* Dolna krawędź */
}

.popup-window-6.open {
    height: 72vh !important; /* Tylko w górę */
    transform: translate(0%, -98.3%);
}
.popup-image {
visibility: hidden;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5vw;
}

.tooth-stage {
    position: absolute;
    visibility: visible; 
    opacity: 0;
    transition: opacity 0.1s ease-in-out;

}
body.landscape .tooth-stage {
    width: 30vw; /* Dopasowane do robota */
    height: auto ;
    top: 0;
    left: 0;
   margin-top: 3.2%;
    margin-left: 26.6%;
}


/* Media queries dla pionowego ekranu */
@media (orientation: portrait) {
.main-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 97vh;

    padding: 1vw;
    background-color: rgba(0, 0, 0, 0.9);
    position: relative;
    margin: 1vw;
    box-shadow: 0 0 8vw #000eff;
    flex-wrap: wrap;
    overflow: hidden;
}

.popup-window {
    position: absolute;
    left: -2%; /* Początkowa pozycja */
    top: 105%; /* Początkowa pozycja */
    width: 0; /* Startowa szerokość */
    height: 0; /* Startowa wysokość */
    background: rgba(0, 123, 255, 0.9);
    color: white;
    font-size: 1vw;
    border: 0.2vw solid #00c3ff;
    border-radius: 0.5vw;
    opacity: 0; /* Ukryte na starcie */
    overflow: hidden; /* Ukrycie zawartości */
    box-shadow: 0 0 1.5vw #00c3ff;
    transition: width 0.3s ease, height 0.3s ease 0.3s, opacity 0.3s ease; /* Najpierw szerokość, potem wysokość */
    z-index: 10;
}

.popup-window.open {
    width: 93vw !important; /* Otwieranie na szerokość */
    height: 40vh !important; /* Całe okno rozwija się w dół */
    transform: translate( 00%, 00%);
    opacity: 1; /* Widoczne */
    padding: 2vw; /* Padding w stanie otwartym */
    overflow: auto; /* Przewijanie w razie potrzeby */
    transition: width 0.3s ease, height 0.3s ease 0.3s; /* Najpierw szerokość, potem wysokość */
}



.robot-section {
    flex: 1 1 30vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vw;
    max-width: 100%;

    position: relative; /* Aby z-index działał */
    z-index: 1; /* Robot na niższej warstwie */

}
.robot-image {
    width: 70vw; /* Wielkość zależna od szerokości okna przeglądarki */
    filter: drop-shadow(0px 0px 1vw #000eff);
    transition: width 0.3s ease;
    margin-top: -0%; /* Przesuwa w dół */
    margin-left: -20%; /* Przesuwa w prawo */

}
#bot-eyes {
    position: absolute;
    width: 70vw; /* Dopasowanie szerokości do robota */
    height: auto; /* Zachowanie proporcji */
    top: 1%; /* Dopasowanie pionowego położenia oczu */
    left: 26%; /* Dopasowanie poziomego położenia względem robota */
    transform: translate(-30%, 0); /* Korekta położenia w osi X */
    z-index: 7; /* Oczy nad robotem */
    opacity: 0; /* Domyślnie ukryte */
    transition: opacity 0.5s ease-in-out; /* Płynne pojawianie się i znikanie oczu */
}



.pizza-image {
    width: 110vw; /* Wielkość zależna od szerokości okna przeglądarki */
    filter: drop-shadow(0px 0px 1vw #000eff);
    transition: width 0.3s ease;
    margin-top: -120%; /* Przesuwa w dół */
    margin-left: -0%; /* Przesuwa w prawo */

}
.pizza-section {
    flex: 1 1 50vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vw;
    max-width: 100%;

    position: relative; /* Aby z-index działał */
    z-index: 1; /* Robot na niższej warstwie */

}

.button-container {
    display: flex;
    flex-wrap: wrap; /* Pozwala na łamanie do kolejnych rzędów */
    justify-content: center; /* Centruje przyciski w poziomie */
    align-items: center; /* Wyrównuje przyciski w pionie */
    gap: 1vw 1vw; /* Odstępy między przyciskami */
    margin: 0 auto; /* Centruje kontener na stronie */
    padding: 0;
    margin-top: 0%;
    margin-left: 0%;

}

.content-section {
width: 100px;

    flex: 1 2 10vw;
    padding: 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
    max-width: 100%;
margin-top: -300%;
    margin-left: 3%;
    position: relative; /* Aby z-index działał */
    z-index: 20; /* Robot na niższej warstwie */
    height: auto; /* Dopasowanie do zawartości */
    overflow: visible; /* Upewnij się, że nic nie jest obcinane */
}

/* Przyciski z grafikami */
.menu-button {
width: 150px;
        height: 13vw;
    filter: drop-shadow(0px 0px 2vw #000eff);
    background-size: contain;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    padding: 0; /* Usunięcie wewnętrznych marginesów */
    transition: transform 0.3s ease, opacity 0.3s ease;
    margin-top: 00%;
    margin-left: 220px;
display: inline-block; /* Zapewnienie działania wymiarów */

}
}

/* Efekt po najechaniu */
.menu-button:hover {
    transform: scale(1.1); /* Powiększenie przycisku */
    opacity: 0.8; /* Lekka zmiana przezroczystości */
}


/* Każdy przycisk z osobną grafiką */
.pizza-btn {
    background-image: url('pizzebtn.webp');
}

.hamburger-btn {
    background-image: url('daniabtn.webp');
}

.promo-btn {
    background-image: url('zapiekankibtn.webp');
}

.salad-btn {
    background-image: url('salatkibtn.webp');
}

.drink-btn {
    background-image: url('napojebtn.webp');
}

.dessert-btn {
    background-image: url('promocjebtn.webp');
}
.tooth-stage {
    position: absolute;
    z-index: 6; /* Nad robotem */
    opacity: 0; /* Domyślnie niewidoczne */
    transition: opacity 0.1s ease-in-out;

}
body.portrait .tooth-stage {
    width: 67.6vw; /* Dopasowane do robota */
    height: auto;
    top: 3;
    left: 0;
   margin-top: -3.8%;
    margin-left: 5.5%;
}

}