/* 
  /$$$$$$                                          /$$      
 /$$__  $$                                        | $$      
| $$  \__/  /$$$$$$   /$$$$$$   /$$$$$$   /$$$$$$$| $$$$$$$ 
|  $$$$$$  /$$__  $$ |____  $$ /$$__  $$ /$$_____/| $$__  $$
 \____  $$| $$$$$$$$  /$$$$$$$| $$  \__/| $$      | $$  \ $$
 /$$  \ $$| $$_____/ /$$__  $$| $$      | $$      | $$  | $$
|  $$$$$$/|  $$$$$$$|  $$$$$$$| $$      |  $$$$$$$| $$  | $$
 \______/  \_______/ \_______/|__/       \_______/|__/  |__/
 */

 .Search {
  text-align: center;
  width: fit-content;
  max-width: 80%;
  margin: 25px auto 50px;
  padding: 1rem 2rem 2rem 2rem;
  background: rgb(54, 178, 209);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.5);
  font-family: 'Segoe UI', sans-serif;
}

.Search label {
  font-size: 1.1em;
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: rgb(0, 0, 0);
}

.Search .nom {
  margin-top: 5px;
}

.Search h3 {
  font-size: 1.1em;
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: rgb(0, 0, 0);
}

.Search input[type="search"]{
  width: 500px;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid rgb(0, 35, 190);
  border-radius: 8px;
  transition: border 0.3s ease;
}


.Search input[type="number"],
.Search input[type="submit"] {
  width: 50%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid rgb(0, 35, 190);
  border-radius: 8px;
  transition: border 0.3s ease;
}

.Search input[type="submit"] {
  display: inline-block;
  width: fit-content;
  padding: 10px 75px 10px 75px;
  margin: auto;
  
}

.Search input[type="search"]:focus,
.Search input[type="number"]:focus {
  border-color: rgb(0, 35, 190);
  outline: none;
}

.Search input[type="checkbox"],
.Search input[type="radio"] {
  margin-right: 0.5rem;
}

.Search input[type="submit"] {
  display: block;
  margin: 1rem auto 0 auto;
  padding: 10px 100px;
  background-color: rgb(16, 56, 233);
  color: white;
  font-weight: bold;
  font-size: 1rem;
  border: 1px solid rgb(0, 35, 190);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.Search input[type="submit"]:hover {
  background-color: rgb(28, 70, 255);
  transition: 0.15s ease;
}

@media (max-width: 600px) {
    .Search input[type="search"] {
    width: 300px;
  }
}

@media (max-width: 450px) {
  .Search {
    text-align: center;
    padding: 0.5rem 1rem 1rem 1rem;
  }

  .Search input[type="search"] {
    width: auto;
  }

  .checkbox-btn span, .checkbox-btn, .triType .radio-btn span, .triType .radio-btn {
    width: 75%;
  }

  .radio-btn {
    width: fit-content;
  }

  .radio-group, .checkbox-group {
    justify-content: center;
  }

  .item {
    justify-content: center;
    margin: 0px;
  }
}

.noResultsMessage {
  margin: 25px;
  font-size: 1.25em;
  text-align: center;
  display: none; 
  color: red; 
  font-weight: bold;
}

.animeCount{
  font-size: 1.25em;
  text-align: center;
  color: rgb(255, 255, 255);
}

/* 
  /$$$$$$            /$$                         /$$ /$$             /$$    
 /$$__  $$          |__/                        | $$|__/            | $$    
| $$  \ $$ /$$$$$$$  /$$ /$$$$$$/$$$$   /$$$$$$ | $$ /$$  /$$$$$$$ /$$$$$$  
| $$$$$$$$| $$__  $$| $$| $$_  $$_  $$ /$$__  $$| $$| $$ /$$_____/|_  $$_/  
| $$__  $$| $$  \ $$| $$| $$ \ $$ \ $$| $$$$$$$$| $$| $$|  $$$$$$   | $$    
| $$  | $$| $$  | $$| $$| $$ | $$ | $$| $$_____/| $$| $$ \____  $$  | $$ /$$
| $$  | $$| $$  | $$| $$| $$ | $$ | $$|  $$$$$$$| $$| $$ /$$$$$$$/  |  $$$$/
|__/  |__/|__/  |__/|__/|__/ |__/ |__/ \_______/|__/|__/|_______/    \___/  
*/

.animelist {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* 
 /$$$$$$$$                               /$$           /$$$$$$$$ /$$ /$$   /$$                                  
|__  $$__/                              | $$          | $$_____/|__/| $$  | $$                                  
   | $$     /$$$$$$   /$$$$$$   /$$$$$$ | $$  /$$$$$$ | $$       /$$| $$ /$$$$$$    /$$$$$$   /$$$$$$   /$$$$$$$
   | $$    /$$__  $$ /$$__  $$ /$$__  $$| $$ /$$__  $$| $$$$$   | $$| $$|_  $$_/   /$$__  $$ /$$__  $$ /$$_____/
   | $$   | $$  \ $$| $$  \ $$| $$  \ $$| $$| $$$$$$$$| $$__/   | $$| $$  | $$    | $$  \__/| $$$$$$$$|  $$$$$$ 
   | $$   | $$  | $$| $$  | $$| $$  | $$| $$| $$_____/| $$      | $$| $$  | $$ /$$| $$      | $$_____/ \____  $$
   | $$   |  $$$$$$/|  $$$$$$$|  $$$$$$$| $$|  $$$$$$$| $$      | $$| $$  |  $$$$/| $$      |  $$$$$$$ /$$$$$$$/
   |__/    \______/  \____  $$ \____  $$|__/ \_______/|__/      |__/|__/   \___/  |__/       \_______/|_______/ 
                     /$$  \ $$ /$$  \ $$                                                                        
                    |  $$$$$$/|  $$$$$$/                                                                        
                     \______/  \______/                                                                         
*/

.toggleFiltres{
  background-color: rgb(54, 178, 209);
  margin: 0.5rem auto auto auto;
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 10px;
  font-size: 1rem;
  font-weight: bold;
  border: 2px solid rgb(0, 21, 206);
  border-radius: 8px;
  color: rgb(0, 21, 206);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: border 0.3s ease;
}

/* 
  /$$$$$$  /$$                           /$$       /$$                          
 /$$__  $$| $$                          | $$      | $$                          
| $$  \__/| $$$$$$$   /$$$$$$   /$$$$$$$| $$   /$$| $$$$$$$   /$$$$$$  /$$   /$$
| $$      | $$__  $$ /$$__  $$ /$$_____/| $$  /$$/| $$__  $$ /$$__  $$|  $$ /$$/
| $$      | $$  \ $$| $$$$$$$$| $$      | $$$$$$/ | $$  \ $$| $$  \ $$ \  $$$$/ 
| $$    $$| $$  | $$| $$_____/| $$      | $$_  $$ | $$  | $$| $$  | $$  >$$  $$ 
|  $$$$$$/| $$  | $$|  $$$$$$$|  $$$$$$$| $$ \  $$| $$$$$$$/|  $$$$$$/ /$$/\  $$
 \______/ |__/  |__/ \_______/ \_______/|__/  \__/|_______/  \______/ |__/  \__/

*/

.checkbox-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.checkbox-btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 0px;
}

.checkbox-btn input[type="checkbox"] {
  display: none;
}

.checkbox-btn span {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 2px solid rgb(0, 21, 206);
  border-radius: 8px;
  color: rgb(0, 21, 206);
  font-weight: bold;
  transition: all 0.3s ease;
}

.checkbox-btn span:hover {
  background-color: rgb(0, 78, 222);
  color: rgb(255, 255, 255);
  transition: 0.15s ease;
}

.checkbox-btn:has(input:checked) span {
  background-color: rgb(0, 21, 206);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.checkbox-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* 
 /$$$$$$$                  /$$ /$$          
| $$__  $$                | $$|__/          
| $$  \ $$  /$$$$$$   /$$$$$$$ /$$  /$$$$$$ 
| $$$$$$$/ |____  $$ /$$__  $$| $$ /$$__  $$
| $$__  $$  /$$$$$$$| $$  | $$| $$| $$  \ $$
| $$  \ $$ /$$__  $$| $$  | $$| $$| $$  | $$
| $$  | $$|  $$$$$$$|  $$$$$$$| $$|  $$$$$$/
|__/  |__/ \_______/ \_______/|__/ \______/ 
*/

.radio-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.radio-btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 0px;
}

.radio-btn input[type="radio"] {
  display: none;
}

.radio-btn span {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 2px solid rgb(0, 21, 206);
  border-radius: 8px;
  color: rgb(0, 21, 206);
  font-weight: bold;
  transition: all 0.3s ease;
}

.radio-btn span:hover {
  background-color: rgb(0, 78, 222);
  color: rgb(255, 255, 255);
  transition: 0.15s ease;
}

.radio-btn:has(input:checked) span {
  background-color: rgb(0, 21, 206);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 
 /$$$$$$$              /$$              
| $$__  $$            | $$              
| $$  \ $$  /$$$$$$  /$$$$$$    /$$$$$$ 
| $$  | $$ |____  $$|_  $$_/   /$$__  $$
| $$  | $$  /$$$$$$$  | $$    | $$$$$$$$
| $$  | $$ /$$__  $$  | $$ /$$| $$_____/
| $$$$$$$/|  $$$$$$$  |  $$$$/|  $$$$$$$
|_______/  \_______/   \___/   \_______/
*/

.triDate {
  border-radius: 12px;
  font-family: 'Segoe UI', sans-serif;
}

.triDate h3 {
  font-size: 1.1em;
  font-weight: bold;
  color: rgb(0, 0, 0);
}

.date {
  background: rgb(54, 178, 209);
  padding: 12px 15px 12px 15px;
  font-size: 1rem;
  border: 2px solid rgb(0, 21, 206);
  border-radius: 8px;
  color: rgb(0, 21, 206);
  font-weight: bold;
  transition: border 0.3s ease, box-shadow 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.date:hover{
  background-color: rgb(0, 78, 222);
  color: rgb(255, 255, 255);
  transition: 0.15s ease;
}

.date:focus {
  border-color: rgb(0, 0, 0);
  box-shadow: 20px rgba(255, 255, 255);
  outline: none;
}

.date option {
  padding: 8px 12px;
  background-color: rgb(100, 162, 255);
  color: rgb(0, 0, 0);
  font-weight: bold;
  text-align: center;
}

.date option:hover {
  background-color: rgb(0, 21, 206);
}

.date option:checked {
  background-color: rgb(0, 21, 206);
  color: rgb(255, 255, 255);
}

.saison-annee-container {
  padding: 0px 30% 0px 30%;
  margin: auto auto 2rem auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.saison-annee-container > div {
  flex: 1;
  min-width: 100px;
}
/* 
 /$$$$$$$                                  /$$     /$$$$$$$              /$$       /$$                        
| $$__  $$                                | $$    | $$__  $$            | $$      | $$                        
| $$  \ $$  /$$$$$$   /$$$$$$$  /$$$$$$  /$$$$$$  | $$  \ $$ /$$   /$$ /$$$$$$   /$$$$$$    /$$$$$$  /$$$$$$$ 
| $$$$$$$/ /$$__  $$ /$$_____/ /$$__  $$|_  $$_/  | $$$$$$$ | $$  | $$|_  $$_/  |_  $$_/   /$$__  $$| $$__  $$
| $$__  $$| $$$$$$$$|  $$$$$$ | $$$$$$$$  | $$    | $$__  $$| $$  | $$  | $$      | $$    | $$  \ $$| $$  \ $$
| $$  \ $$| $$_____/ \____  $$| $$_____/  | $$ /$$| $$  \ $$| $$  | $$  | $$ /$$  | $$ /$$| $$  | $$| $$  | $$
| $$  | $$|  $$$$$$$ /$$$$$$$/|  $$$$$$$  |  $$$$/| $$$$$$$/|  $$$$$$/  |  $$$$/  |  $$$$/|  $$$$$$/| $$  | $$
|__/  |__/ \_______/|_______/  \_______/   \___/  |_______/  \______/    \___/     \___/   \______/ |__/  |__/
*/

.resetButton {
  display: block;
  text-align: center;
  margin: 1rem auto 0 auto;
  background-color: rgb(255, 255, 255);
  color: rgb(16, 56, 233);
  font-weight: bold;
  width: fit-content;
  padding: 7.5px;
  font-size: 0.75rem;
  border: 2px solid rgb(0, 35, 190);
  border-radius: 10px;
}

.resetButton:hover{
  background-color: rgb(53, 90, 255);
  color: rgb(255, 255, 255);
  transition: 0.15s ease;
}

.ajoutAnime{
  margin: auto;
  text-decoration: none;
  color: rgb(255, 255, 255);
  width: 50%;
  padding: 10px;
  font-size: 1rem;
  background-color: rgb(0, 35, 190);
  border-radius: 8px;
}

.ajoutAnimeDiv{
  text-align: center;
  margin: 25px;
}