/* Filter container */
.filter-container {
    position: sticky;
    top: 20px;
    z-index: 900;
    background-color: rgba(255, 255, 255, .8) ;
    padding: 10px;
    margin: 0 auto 20px auto; /* Center the container */
    border-radius: 8px;
    max-width: 800px;
    box-shadow: 0 10px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}
@media (max-width: 1000px) {
  .filter-container {
    top: 74px;
  }
}

/* Filter container */
.toggle-container{
    display: flex; /* Enable Flexbox */
    justify-content: space-between; /* Space between buttons */
    align-items: left; /* Vertically align items */
    width: 100%; /* Full width of the container */
    box-sizing: border-box; /* Include padding/border in width calculation */
    gap:10px;
}

/* Toggle button (70% width) */
#toggle-filter {
    background-color: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    width: 100%; /* Ensure it takes 70% of the container width */
    text-align: center;
    box-sizing: border-box; /* Include padding and border in width */
}

/* Reset button (30% width) */
#reset-filter a {
    background-color: #c7e3bf;
    color: #000;
    border: none;
    cursor: pointer;
    width: 30%; /* Ensure it takes 30% of the container width */
    text-align: center;
    box-sizing: border-box; /* Include padding and border in width */
}


/* Hidden filter content by default */
#filter-content {
    display: none;
    max-width: 800px;
    padding: 20px;
    margin: 0 auto; /* Center the content */
    position: absolute; /* Or fixed based on your layout */
    top: 50px; /* Adjust as needed */
    left: 0;
    right: 0;
    width: 100%;
    background-color: white;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for visibility */
    box-sizing: border-box; /* Ensures padding is included in max-width */  
    border-radius: 0 0 8px 8px;
}

#filter-content.open {
    display: block;
}


/* Form container with Flexbox */
.filter-content form {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next row */
    gap: 10px; /* Space between form groups */
    justify-content: flex-start; /* Align items to the left */
}

/* Form group: label + input container */
.form-group {
    display: flex;
    flex-direction: column; /* Stack label above input */
    flex: 1 1 calc(33.33% - 10px); /* 1/3 width minus gap */
    box-sizing: border-box; /* Include padding and border in width */
}

/* Label styling */
.form-group label {
    font-size: 10px;
    font-weight: bold;
}

/* Input and button styling */
.form-group select{
    box-sizing: border-box; /* Ensure padding is included in width */
}

/* Responsive: Stack elements vertically on smaller screens */
@media screen and (max-width: 1000px) {
    .form-group {
        flex: 1 1 100%; /* Full width */
    }
}

/* Base style for mint status circle */
.mint-status-0,
.mint-status-1,
.mint-status-2 {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Base shadow for depth */
    animation: blink 1.5s infinite, glow 1.5s infinite;
}

/* Red blinking and glowing for mint_status = 0 */
.mint-status-0 {
    background-color: red;
    animation: blink 1.5s infinite, glow-red 1.5s infinite;
}
/* Green blinking and glowing for mint_status = 1 */
.mint-status-1 {
    background-color: yellow;
    animation: blink 1.5s infinite, glow-yellow 1.5s infinite;
}

/* Green blinking and glowing for mint_status = 2 */
.mint-status-2 {
    background-color: green;
    animation: blink 1.5s infinite, glow-green 1.5s infinite;
}

/* Blinking animation */
@keyframes blink {
    50% {
        opacity: 0.5; /* Reduce opacity in the middle of the animation */
    }
}

/* Glowing animation for red */
@keyframes glow-red {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.8), 0 0 15px rgba(255, 0, 0, 0.6);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 0, 0, 1), 0 0 30px rgba(255, 0, 0, 0.8);
    }
}

/* Glowing animation for green */
@keyframes glow-green {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 255, 0, 0.8), 0 0 15px rgba(0, 255, 0, 0.6);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 255, 0, 1), 0 0 30px rgba(0, 255, 0, 0.8);
    }
}

input[type=text] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #f4f4f4;
    border: 1px solid #f4f4f4;
    color: #000000;
    font-family: "Press Start 2P", serif;
    font-size: 10px;
    height: 35px;
    cursor: pointer;
    padding: 10px 20px;
    margin: 0 0 0 0;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}