/* NEWLY ADDED GAMES */
.newly-added {
    display: inline-grid;
    grid-auto-flow: column;
    grid-area: Newly-Added;
    gap: 2em;
    grid-auto-rows: 200px;
    overflow-x: visible;
    position: relative;  
    /* background-color: rgb(197 197 197 / 50%);
    backdrop-filter: blur(10px); */
    padding-top: 1em;
    padding-left: 1em;
    padding-bottom: 1em;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  */
}

.New-Games { 
    grid-row: 2; 
    display: flex;
    gap: 1em;
    padding-left: 2em;
    flex-direction: column; 
} 

.newly-added::-webkit-scrollbar {
    display: none; /* Hide the default scrollbar */
}

.games-container {
    display: inline-flex;
    width: 100vw;
    gap: inherit;
}

/* Image and Title Styling for Games */
.newly-added img {
    grid-column: span 1;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 150px;
    max-height: -webkit-fill-available;
    border-radius: 18px;
    cursor: pointer;
    transition: transform 0.3s ease;
    /* box-shadow: 0px 4px 12px rgb(0 0 0 / 43%); */
}


.newly-added img:hover {
    transform: scale(1.1);
    
}

.gamehub-unique-game-title {
    margin-top: 0.5rem;
    font-size: 1.2rem;
}

/* Scroll Buttons */
#start-scroll-button {
    position: absolute; /* Position relative to the parent .newly-added */
    left: 0;
}

#end-scroll-button {
    position: absolute; /* Position relative to the parent .newly-added */
    right: 0;
}

/* TITLE CATEGORY */
.title-category {
    display: inline-flex;
    align-items: center;
    width: 100%;
    padding: 1em;
    /* background-color: rgb(197 197 197 / 50%);
    backdrop-filter: blur(10px); 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

.title-category h2 {
    margin: 0;
    font-size: 1.5em;
    font-weight: 800;
    color: #fff; 
}

/* FILTER BOX */
.filter-box {
    display: grid;
    grid-template-columns: 1fr auto; /* Title takes most space, filter box auto-sizes */
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    padding: 0.5em;
    width: fit-content;
    height: 1.5em;
    color: #fff;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

@keyframes animation-white-to-gray {
    0% { color: inherit; }
    100% { color: #333; }
  }

  
  @keyframes animation-gray-to-white {
    0% { color: inherit; }
    100% { color: #fff; }
  }


.filter-box svg[text-color-theme="dark"] {
    animation: 0.5s animation-white-to-gray ease-in-out;
    color: #333;
}

.filter-box svg[text-color-theme="light"] {
    animation: 0.5s animation-gray-to-white ease-in-out;
    color: #fff;
}


.filter-icon {
    width: 1.2em; 
    height: 1.5em; 
    vertical-align: middle;
}


/*
.filter-box:hover {
    background-color: #b1aeae; 
}
*/

.filter-box details {
    width: 100%;
    position: relative;
    transition: max-height 0.3s ease-in-out; /* Smooth expand and collapse */
    max-height: 2.5em; /* Initial height when closed */
    -webkit-filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, .8));
    filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, .8));
    z-index: 9;
}

.filter-box details[open] {
    max-height: 25vh; /* Expand when open */
}

.filter-box details[collapsed] {
    transition: 0em 0.3s ease-out; 
}

.filter-box summary {
    list-style: none;
    user-select: none;
    cursor: pointer;
}

.filter-box summary::marker {
    display: none;
}

.filter-box details[open] summary {
    font-weight: bold;
}

/* Filter Dropdown List Styling */
.filter-box ul {
    position: sticky;
    top: 100%;
    width: max-content;
    left: 0;
    right: 0;
    background-color: #222;
    padding: 10px;
    border-radius: 8px;
    overflow: auto;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 9;
    max-height: 0;
    transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
    grid-template-rows: 1.5em 0fr;
}

.filter-box details[open] ul {
    opacity: 1;
    max-height: 25vh; /* Expand to desired size */
    grid-template-rows: 1.5em 1fr;
}

/* Filter List Items */
.filter-box ul li {
    list-style: none;
    padding: 8px 12px;
    color: #ddd;
    border-radius: 6px;
    transition: background-color 0.2s ease-in-out;
}

.filter-box ul li:hover {
    background-color: #444;
    border-radius: 6px;
}

/* CUSTOM CHECKBOX */
.custom-checkbox {
    appearance: none; /* Remove default checkbox styling */
    width: 12px;
    height: 12px;
    border: 2px solid #ddd; /* Border color when unchecked */
    border-radius: 50%; 
    margin-right: 8px; /* Space between checkbox and label */
    cursor: pointer; 
    outline: none; 
    position: relative; /* For positioning the pseudo-elements */
    transition: background-color 0.3s, border-color 0.3s; /* Smooth transitions */
}

.custom-checkbox:checked {
    background-color: purple; 
    border-color: purple;
}

.custom-checkbox:checked::after {
    content: ''; /* Necessary for the pseudo-element */
    position: absolute;
    width: 8px; 
    height: 8px; 
    border-radius: 50%; /* Make it round */
    background-color: #fff; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

/* FILTER RESET ICON */
.filter-reset-icon {
    fill: #fff;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.filter-reset-icon:hover {
    transform: rotate(90deg); /* Rotate the reset icon on hover */
}

/* CUSTOM SCROLLBAR FOR TAGS LIST */
.tags-list::-webkit-scrollbar {
    background-color: #33333300; /* Transparent scrollbar */
}
