body{
    background-color: #0e2546;
}

main {

    width: 100%;

    height: 67.5vh;

    

    

    padding: 0;

    margin: 0;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    transition: height 0.3s ease-in-out;

}



.lowiska-container {

    display: flex;

    width: 100%;

    height: 100%;

    

}



.lowisko {

    position: relative;

    width: 33.33%;

    height: 100%;

    overflow: hidden;

    cursor: pointer;

    transition: transform 0.3s;

}



.lowisko img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s;

}



.lowisko:hover img {

    transform: scale(1.1);

}



.lowisko .info {

    position: absolute;

    top: 20vh;

    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

    font-family: bebas;

    font-weight: bold;

    color: white;

    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);

    white-space: nowrap;

    

}







.lowisko h3 {

    margin: 0;

    font-size: 4vw;

}



.lowisko .cena {

    margin-top: 5px;

    font-size: 2.5vw;

}
.wstrzymane {
    color: rgb(255, 63, 63);
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.6);
    letter-spacing: 1px;

}



#h2w {

    

    text-align: center;

    color: white;

    background: rgba(0, 0, 0, 0.825);

    top: 0;

    left: 0;

    text-justify: center;

    max-width: 100%;

    position: absolute;

    width: 100%;

    height: auto;

    min-height: calc(+12%);

    display: grid;

    place-items: center;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: bebas;

    letter-spacing: 0.2em;

    padding: 0%;

    margin: 0%;

    white-space: nowrap;

}



/* 🔹 Główna sekcja expanded */

main.expanded {

    display: block;

    flex-direction: column;

    width: 100%;

    height: auto; /* Zapewnienie pełnej widoczności */

    

    margin-top: 12vh!important;

    background-color: #444;

    margin: 0;

    padding: 0;


    box-sizing: border-box;

}


@media screen and (max-width: 1400px) {
           
    main.expanded {
        
        
        margin-top: 10vh!important; /* Dodajemy margines równy wysokości headera */
        
        
    }
    
}


@media screen and (max-width: 1055px) {
           
    main.expanded {
        
        
        margin-top: 8vh!important; /* Dodajemy margines równy wysokości headera */
        
        
    }
    
}




@media screen and (max-width: 750px) {
           
    main.expanded {
        
        
        margin-top: 8vh!important; /* Dodajemy margines równy wysokości headera */
        
        
    }
 
}




/* 🔹 Nagłówek w expanded */

.lowisko-header{

    white-space: nowrap;

    top: 0;

    left: 0;

    width: 100%;

    height: auto;

    text-align: center;

    background: rgba(0, 0, 0, 0.558);

    color: white;

    font-size: 1.8rem;

    font-family: bebas;

    letter-spacing: 0.1em;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

}

.lowisko-header h2 {

    white-space: nowrap;

    top: 0;

    left: 0;

    width: 100%;

    height: 50px;

    text-align: center;

    background: rgba(0, 0, 0, 0.558);

    color: white;

    font-size: 1.8rem;

    font-family: bebas;

    letter-spacing: 0.1em;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

}



/* 🔹 Sekcja filmów */

.lowisko-video-container {


    width: 100%;

    height: 15%;

    background: #000000b5;

    margin-top: 1.4%;

    box-sizing: border-box;

    overflow-y: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: row;
    gap: 15px;

}





.lowisko-video-container iframe {

    transition: transform 0.3s ease-in-out;

}



.lowisko-video-container iframe:hover {

    transform: scale(1.035); /* Powiększa miniaturę o 10% */

    

    

}







.lowisko-video {

    width: 340px;
    height: 191px;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}









/* 🔹 Sekcja opisu i przycisku powrotu */

.lowisko-info-container {

    font-family: arial;

    font-weight: bold;

    flex: 2;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding-left: 1%;

    text-align: center;

    color: white;

    width: auto;

    height: auto;

}





.lowisko-info-container p {

    background: rgba(0, 0, 0, 0.644);
    letter-spacing: 0.5px;
    border-radius: 15px;
    padding: 10px;
    width: 85%;

    

}

#open-modal-regulamin{
    padding: 12px 20px;

    background: #417e8d;

    color: white;

    font-family: arial;

    font-size: 0.8rem;

    border: none;

    cursor: pointer;

    border-radius: 5px;

    font-weight: bold;

    text-transform: uppercase;

    transition: background 0.3s;

    text-justify: center;

    white-space: nowrap;

    margin-top: 7px;
}

#open-modal-regulamin:hover{
    background: #2a515b;
}

.lowisko-info-container .lowisko-back-button {

    padding: 12px 20px;

    background: #417e8d;

    color: white;

    font-family: arial;

    font-size: 0.8rem;

    border: none;

    cursor: pointer;

    border-radius: 5px;

    font-weight: bold;

    text-transform: uppercase;

    transition: background 0.3s;

    text-justify: center;

    white-space: nowrap;

    margin-top: 4px;

    

}



/* 🔹 Przycisk powrotu */





.lowisko-back-button:hover {

    background: #2a515b;

}



.lowisko-rezerwacja-container {

    

    display: flex;

    flex-direction: column;

    justify-content: center; /* Środkowanie w pionie */

    margin-right: 1%;

    align-items: center;

    color: white;

    width: 30% !important;

    height: auto;
    background: #00000094;
    border-radius: 6px;
}







#notification-message{

    background-color: #ff0000bd;

    align-items: center;

    justify-content: center;

    font-family: bebas;

    

}



/* 🔹 Formularz */

#rezerwacja-form {

    display: flex;

    flex-direction: column;

    gap: 10px;

   width: 90%;

    height: auto;

}
#rezerwacja-form button {

    margin-bottom: 8px;
}

#rezerwacja-form h3 {

    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
    font-size: 3vw;
    white-space: nowrap;
    font-family: impact;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    
    font-weight: 500;

}



/* 🔹 Inputy w expanded */

#rezerwacja-form input {

    width: 100%;

    padding: 12px 10px;

    border: 1px solid #777;

    background: #222;

    color: white;

    font-size: 1rem;

    border-radius: 5px;

    outline: none;

}



/* 🔹 Placeholdery jako tekst w inputach */

#rezerwacja-form input::placeholder {

    color: #bbb;

    font-size: 0.9rem;

}



/* 🔹 Przycisk formularza */

#rezerwacja-form button {

    padding: 12px 20px;

    background: #222 ;

    color: white;

    font-family: arial;

    font-size: 1.2rem;

    border: none;

    cursor: pointer;

    border-radius: 5px;

    font-weight: bold;

    text-transform: uppercase;

    transition: background 0.3s;

    text-justify: center;

}











   







   








#rezerwacja-form button:hover {

    background: #867d79;

}























input[type="date"]::-webkit-calendar-picker-indicator {

    filter: invert(1); /* Odwraca kolory, zmieniając czarny na biały */

}

input[type="date"]::-webkit-calendar-picker-indicator:hover {

    filter: invert(0); /* Odwraca kolory, zmieniając czarny na biały */

}



.lowisko-main-container{

    display: flex;

    height: 100%;

    width: 100%;

    flex-direction: column;

}



#middle{

    display: flex;

    flex-direction: row;

    width: 100%;

    height: auto;

    padding-top: 0.5%;

}






.modal-regulamin-content h2 {
   font-size:3.5vh;
}

/* Przycisk zamykania */
.close-modal-regulamin {
    position: absolute;
    top: 0px;
    right: 10px;
    font-size: 30px;
    cursor: pointer;
    color: black;
    border: none;
    background: none;
    font-family: arial;
}



.modal-regulamin {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-regulamin-content {
    background: white;
    padding: 10px;
    border-radius: 10px;
    width: 80vw;
    max-width: 90vw;
    height: 90vh;
    max-height: 95vh;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: bebas;
    color: black;
    position: relative;
}

/* 📜 PDF pełny na PC */
.modal-regulamin iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    object-fit: contain;
}

/* 📱 Poprawka na telefon – skalowanie i wyrównanie PDF */
@media (max-width: 768px) {
    .modal-regulamin-content {
        width: 90vw;
        height: 90vh;
        max-width: 90vw;
        border-radius: 10px; /* 🔥 Usuń zaokrąglenia na telefonie */
        padding: 0; /* 🔥 Usuń padding, żeby PDF zajmował całość */
    }

    .modal-regulamin iframe {
        width: 100vw; /* 🔥 Pełna szerokość ekranu */
        height: 100vh; /* 🔥 Pełna wysokość ekranu */
        object-fit: cover;
    }



    .lowisko-main-container{
flex-direction: column;
    }

#middle{
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
    align-items: center;

}


.lowisko-info-container{
    width: 100%;
    padding-left: 0%!important;
}



#rezerwacja-form{
    width: 90%;
    gap: 5px;
}



#rezerwacja-form h3 {
font-size: 7vw;

}


.lowisko-rezerwacja-container{
    align-items: center;
    width: 70%!important;
    padding-right: 0%;
    margin-top: 12px;
}
.lowisko-rezerwacja-container button{
    margin-bottom: 6px;
}

.lowisko-video-container{
    height: 100%;
    margin-top: 5px;
    flex-direction: row;
    gap: 7px;
    
}

.lowisko-video{

    width: 135px;
    height: 76px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-top: 10px;

}

#vid-iframe{

    width: 390px!important;
    height: 219px!important;
}


.lowisko-info-container p {
    font-size: 1.2vh;
}


}

















/* 🔄 Responsywność dla .lowiska-container i .lowisko */

@media (max-width: 900px) {
    #h2w{
        min-height: calc(+5%)!important;
    }
    .lowiska-container {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0px;
      padding: 0px 0;
    }
  
    .lowisko {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
    }
  
    .lowisko img {
      height: 100%;
      object-fit: cover;
    }
  
    .lowisko .info {
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 1.8rem;
    }
  
    .lowisko h3 {
      font-size: 2rem;
    }
  
    .lowisko .cena {
      font-size: 1.2rem;
    }
  }
  


  #vid {
    
    margin-top: 30px;
}



#vid-container {
    display: flex;
    justify-content: center;
}

#vid-iframe {
    aspect-ratio: 16 \ 9;
    width: 720px;
    height: 405px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}



#rezerwacja-form .checkbox-container {
        display: flex;
        align-items: center;
        gap: 10px;
        /* margin-top: 8px; */
        font-family: Arial, sans-serif;
        font-size: 1rem;
        color: white;
        justify-content: center;
        background: #222;
        padding: 12px 10px;
        border-radius: 5px;
        font-family: arial;
    font-weight: bold;
}

#rezerwacja-form .checkbox-container input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #417e8d;
    cursor: pointer;
    margin: 0;
}

#rezerwacja-form .checkbox-container a {
    color: #6fc3df;
    text-decoration: none;
    transition: color 0.3s ease;
}

#rezerwacja-form .checkbox-container a:hover {
    color: #44a0be;
    text-decoration: underline;
}