.games-filter-wrapper {
display: flex;
gap: 20px;
margin: 0px;
flex-wrap: wrap;
}
.filter-sidebar {
width: 250px;
flex-shrink: 0;
} #clear-all-filters {
background-color: #ff7b25;
color: white;
border: none;
padding: 8px 15px;
text-align: center;
text-decoration: none; display: inline-block; 
font-size: 14px;
margin: 10px 0 20px;
cursor: pointer;
border-radius: 5px;
font-weight: bold;
width: 100%; transition: background-color 0.2s; z-index: 100;
position: relative;
touch-action: manipulation;
}
#clear-all-filters:hover {
background-color: #e56c1d;
} .active-filters-container {
margin: 0 0 20px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f7f7f7;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.active-filters-title {
font-weight: bold;
color: #333;
margin-right: 10px;
font-size: 14px;
flex-shrink: 0;
}
.active-filters-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
} .active-filter-item {
display: inline-flex;
align-items: center;
background-color: #586D96; color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 13px;
cursor: pointer;
transition: background-color 0.2s;
line-height: 1; }
.active-filter-item:hover {
background-color: #435474;
} .filter-remove-btn {
margin-left: 8px;
font-weight: bold;
font-size: 16px;
cursor: pointer;
line-height: 1;
} @media (max-width: 480px) {
.active-filters-container {
flex-direction: column;
align-items: flex-start;
}
.active-filters-title {
margin-bottom: 5px;
}
} .games-grid {
flex: 1;
} .grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.grid-item {
background: #f9f9f9;
padding: 0px;
border: 1px solid #ff7b25 !important;
text-align: center;
}
.grid-item img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
border-radius: 0;
}
.grid-item h4 {
font-size: 18px;
margin-top: 10px;
margin-left:10px;
margin-right:10px;
font-family:Avenir Next Demi Bold !important;
}
.grid-item p {
font-size: 16px;
color: #586D96;
padding:0px 5px 0px 5px !important; max-height: none;
overflow: visible;
position: static; margin-bottom: 10px; line-height: 1.4; 
}
.grid-item p::after { content: none;
}
.game-label {
font-size: 16px;
display: block;
margin: -5px 0;
}  @media (max-width: 1024px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
}
} @media (max-width: 768px) {
.games-filter-wrapper {
flex-direction: column;
}
.filter-sidebar {
width: 100%;
margin-bottom: 0px;
} #clear-all-filters {
display: none !important; 
}
.grid-container { grid-template-columns: repeat(2, 1fr) !important;
} .grid-item p { max-height: 75px;
overflow: hidden;
position: relative;
padding-right: 1em; } .grid-item p::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding: 0 5px 0 10px;
background: #f9f9f9; }
} @media (max-width: 480px) {
.grid-item {
background: #f9f9f9;
padding: 0px;
border: 1px solid #ff7b25 !important;
text-align: center;
}
.grid-item h4 {
font-size: 16px!important;
}
.grid-item p {
font-size: 13px;
padding: 05px;
color: #586D96;
margin-top:-15px!important; }
.game-label {
font-size: 12px;
display: block;
margin: -5px 0;
}
} .games-pagination {
display: flex;
justify-content: center;
margin-top: 20px;
flex-wrap: wrap;
} .games-pagination a,
.games-pagination span {
display: inline-block;
padding: 8px 14px;
margin: 2px;
font-size: 15px;
color: #333;
border: 1px solid #ddd;
border-radius: 5px;
background: #fff;
text-decoration: none;
transition: all 0.2s ease-in-out;
} .games-pagination a:hover {
background: #f0f0f0;
border-color: #ccc;
} .games-pagination .current {
background: #4CAF50;
color: #fff !important;
border-color: #4CAF50;
font-weight: bold;
} .games-pagination .prev,
.games-pagination .next {
font-weight: bold;
} .games-pagination .disabled {
opacity: 0.5;
pointer-events: none;
} .games-loader {
display: none;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(255,255,255,0.7);
z-index: 9999;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.games-loader.active {
display: flex;
opacity: 1;
}
.games-loader::after {
content: "";
width: 40px;
height: 40px;
border: 4px solid #ff7b25;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
} .grid-item {
background: #fff;
border: 1px solid #ddd;
padding: 0px;
border-radius: 6px;
text-align: center;
font-size:15px;
}
.total-games-count {
font-size: 18px;
font-weight: bold;
color: #19306C; text-align: center;
margin: 10px 0px 20px;
font-family: Avenir Next Demi Bold;
letter-spacing: 1px;
text-transform: uppercase;
}