body{
    min-width:500px;
}
.gry-mapa
{
    padding-top: 0px;
}
#powieksz_mape
{
    margin-left:0px;
}
.search-form
{
    /* width:700px; */
    margin-left:15px;
}
#map
{
    width: 700px !important;
    height: 600px !important;
    text-align: left !important;
}
#map-container {
    margin-left: 100px;
    display: flex;
    justify-content: flex-end; 
    width: 100%;
    margin-right:100px;
}


    .gry-lista
    {
        padding-top: 0px !important;
        flex: 1 1 50%; 
        margin-top: 2em;
        margin-left:50px;
        /* min-width:400px;
        max-width: 150%; */
    }
    .container1
    {
        width:90%;
    }

    #lista_gier1
    {
        margin-right:50px;
        float:right;
    }
    .post.facebook-post
    {
        background: #ffffff !important;
        margin: 0px 0px 10px;
        padding: 0px 10px;
        /* border-top: 5px dashed #919191; */
        /* box-shadow: 1px 1px 6px -2px #333; */
        box-shadow: none;
    }
    .row
    {
        display:flex;
    }
.title-container {
    display: flex;
    justify-content: center; 
    align-items: center;
    gap: 20px; 
    margin-top: 80px;
    position: relative;
}

.search-page-title {
        display: flex;
        align-items: center; 
        justify-content: center; 
        text-align: center;

}

.filter-form {
    display: flex;
    align-items: center;
    gap: 10px; 
    position: absolute;
    top: 30px;
    right: 18vw; 
}
@media (max-width: 1350px) {
    .title-container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .filter-form {
        position: static; 
        margin-top: 10px;
    }
}
.subtitle
{
    margin-top:-20px;
}

@media (min-width: 1350px) and (max-width: 1770px) {

#map
{
width: 450px !important;
height: 530px !important;
margin-left: 10px;
}
.search-form
{
/* width:450px; */
margin-left: 25px;
}
#powieksz_mape
{
margin-left:10px;
}
#map-container
{
margin-left: 150px;
}
img.wp-post-image {
max-width: 150%;
width: auto;
height: auto;
}
}

@media (min-width: 1650px) and (max-width: 1770px) {
    #map
    {
    width: 550px !important;
    height: 530px !important;
    margin-left: 10px;
    }
    .search-form
    {
    /* width:550px; */
    margin-left: 25px;
    }
}
@media (max-width: 768px){
    .search-form
    {
    width:400px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:20px;
    }
    #flex_div
    {
    display:block !important;
    }
    #map
    {
    width: 400px !important;
    height: 400px !important;
    margin-left: 25px;
    }
    #powieksz_mape
    {
    margin-left:10px;
    }
    #map-container
    {
    margin-left: auto;
    margin-right: auto;
    }
}

@media (min-width: 768px) and (max-width: 1350px) {
#flex_div
{
display:block !important;
}
#map
{
width: 400px !important;
height: 400px !important;
margin-left: 25px;
}
.search-form
{
margin-left: auto;
margin-right: auto;
margin-bottom:20px;
width:400px;
}
#powieksz_mape
{
margin-left:10px;
}
#map-container
{
margin-left: auto;
margin-right: auto;
}
.games-container {
    margin-left: auto; 
    margin-right: auto; 
    align-items: center; 
    justify-content: center;
}

}

#flex_div
{
display:flex;
}

/* post kafelek box */

.tile:hover {
transform: scale(1.05);

}
.tile-image img {
    max-width: 100%; /* Obrazek nie będzie większy niż kontener */
    height: auto; /* Zachowuje proporcje */
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.tile {
position: relative;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
width:270px;
height:270px;
border-bottom: 6px solid transparent; 
margin-bottom:20px;
margin-left:auto;
margin-right:auto;
/* border-top: 2px solid transparent; 
border-right: 2px solid transparent; 
border-left: 2px solid transparent;  */
}
.tile-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(224, 224, 224, 0.71);
padding: 20px;
font-size: 13px;
transition: bottom 0.5s ease;
}

.tile-overlay p { 
opacity: 0; 
transition: opacity 0.5s ease;
color: black; 
}

.tile:hover .tile-overlay {
bottom: 0;
}

.tile:hover .tile-overlay p {
opacity: 1; 
}


.tile-content {
text-align: center;
}

.entry-title a {
color: black;
text-decoration: none;
font-size:18px;
font-weight: 500;
}

.entry-meta {
color:rgb(0, 0, 0);
}

.read-more {
display: none;
margin-top: 10px;
padding: 5px 10px;
background: #0073e6;
color: black;
text-decoration: none;
border-radius: 5px;
}
.game-city
{
font-size:15px; 
margin: -10px auto -10px auto;
color: #404B68;
}

.flex-container {
display: flex;
justify-content: space-between; 
align-items: center; 
padding: 10px;
background-color: #f9f9f9; 
border-radius: 5px;
margin: 10px 0;
}

.label {
font-weight: bold;
color: #333;
margin-right: 5px;
font-size:12px;
}

.age-text, .duration-text {
color: #555;
margin-right: 10px;
font-size:12px;
}

@media (max-width: 768px) {
.flex-container {
flex-direction: column; 
align-items: flex-start;
}
.label {
display: block; 
margin-bottom: 5px;
}
}
.games-container {
display: flex;
gap: 20px; 
}

.row {
display: flex;
}

.games-container {
    display: flex;
    flex-wrap: wrap; /* Kafelki przechodzą do nowego wiersza, gdy nie mieszczą się w kontenerze */
    gap: 20px; /* Odstęp między kafelkami */
    margin-left:auto;
    margin-right:auto;
}
.game-tile
{
    width:290px;
    height:311px;
    margin-left:auto;
    margin-right:auto;
}

.game-tile1
{
    width:290px;
    height:311px;
    margin-left:auto;
    margin-right:auto;
}



/* Responsywność */
@media (max-width: 768px) {
    .game-tile {
        flex: 1 1 100%; /* 1 kolumna na małych ekranach */
        max-width: 100%;
    }
    .game-tile1{
        flex: 1 1 100%; /* 1 kolumna na małych ekranach */
        max-width: 100%;
    }
}

@media (max-width: 768px) {
.row {
flex-direction: column; 
margin-right: auto;
margin-left:auto;
}
.game-tile {
max-width: 100%;
}
.game-tile1{
    max-width: 100%;
}
/* .tile
{
width: 400px; 
height:auto;
} */
/* .tile-overlay
{
bottom: -30%;
} */
.post.facebook-post
{
padding: 0px 0px;
}
.filter-container
{
    margin-top:20px;
}
}
/* filters + background */
body {
background-color: #fff;
background-image: url(/wp-content/themes/lighthouse-child/assets/images/LINIA_JASNA.svg);
background-size: 100%;
background-repeat: repeat-y;
}
.filter-container {
    margin-left: auto;
    display: flex;
    align-items: center; 
    justify-content: center; /* Wycentrowanie poziome */
    gap: 20px;
    padding: 10px;
    flex-wrap: wrap;
}

.filter-item {
display: flex;
align-items: center; 
gap: 10px;
margin-right:20px;
}
.filter-item1
{
margin-right:30px;
}

.icon img {
width: 40px;
height: 40px;
background-color: #d3e0f4;
padding: 5px;
border-radius: 50%;
position: relative;
z-index: 101;
}

.filter-content {
display: flex;
flex-direction: column; 
align-items: flex-start;
margin-left: -13px;
position: relative;
z-index: 100;
}

.filter-content select
{
    border-radius: 10px;
}

.range-container {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}

input[type="range"] {
flex-grow: 1; 
}

.range-value {
font-weight: bold;
min-width: 40px;
text-align: center;
}
.flags {
display: flex;
align-items: center;
gap: 5px;
}

.flags img, .toggle-checkbox img {
width: 40px;
height: 40px;
cursor: pointer;
transition: transform 0.2s ease-in-out;
border-radius: 50%;
}

.flags img:hover, .toggle-checkbox img:hover {
transform: scale(1.1); 
}
.flag, .toggle-checkbox {
cursor: pointer;
transition: opacity 0.2s;
}

.flag input:checked + img, 
.toggle-checkbox[data-checked="true"] img {
opacity: 0.5;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5)); 
}
#picture-wrapper
{
    display:none;
}
.filter-toggle {
    background: #ddd !important; 
    border-color: #ddd;
    color: #333 !important; 
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.filter-toggle:hover,
.filter-toggle:active,
.filter-toggle:focus
{
    background-color: #bbb; 
    border-color: #bbb;
}

#secondary {
    margin-left: auto;
    margin-right: auto;
    width: 80%; /* lub inna odpowiednia szerokość */
    display: flex;
    justify-content: center;
    gap: 15px;
    opacity: 0;
    transition: opacity 0.3s ease;
    flex-wrap: wrap; /* Zapobiega zawijaniu elementów */
}

.grupping {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap; /* Zapobiega zawijaniu elementów */
    white-space: nowrap; /* Zapobiega łamaniu tekstu */
}

.grupping select {
    flex: none; /* Wyłącza rozciąganie */
    min-width: 200px;
    width: auto; /* Automatyczna szerokość */
}