/* --------------------------------------------------------------------- */
/* General */
/* --------------------------------------------------------------------- */


footer {
    bottom: 10px;
    text-align: center;
    width: 100%;
    font-size: 12px;
    color: #333;
    display: flex;
    justify-content: center;
}

.flashcard-area  {
    font-family: Arial, sans-serif;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 85vh;
    margin: 0;
    flex-direction: column;
    display: flex;
}


.hidden {
    display: none;
}

@keyframes fadeInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInFromTop 0.5s ease-in-out;
}

.w3-sidebar {
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
}


/* --------------------------------------------------------------------- */
/* Colours */
/* --------------------------------------------------------------------- */

/* Main */
body, .flashcard-area   {background-color: #f0efeb;}
footer div              {background-color: #;}
#mySidebar              {background-color: #d6ccc2;}
.w3-top                 {background-color: #200b0b;}
#menu_button            {background-color: #a78a7f;color:white;}
#menu_button:hover      {background-color: white;color:black;}


/*  Flashcard recto / verso */
#question               {background-color: #;}
#answer                 {background-color: #;}

/* Buttons */
#next-card              {background-color: #00b4d8;color: white;}
#next-card:hover        {background-color: #023047;color: white;}
#correct-button         {background-color: #7ae582;color: white;}
#correct-button:hover   {background-color: #218838;color: white;}
#wrong-button           {background-color: #fe5f55;color: white;}
#wrong-button:hover     {background-color: #c82333;color: white;}
#btn_export             {background-color: #a78a7f;}
#btn_export:hover       {background-color: #735751;}
#btn_import             {background-color: #a78a7f;}
#btn_import:hover       {background-color: #735751;}
#btn_list               {background-color: #a78a7f;}
#btn_list:hover         {background-color: #735751;}
#btn_edit               {background-color: #a78a7f;}
#btn_edit:hover         {background-color: #735751;}
#language               {background-color: #d6ccc2;}

/* Slider */
.slider                 {background-color: #f0efeb;} /* fond du slider inactivé */
input:checked + .slider {background-color: #3b28cc;} /* fond du slider activé */
.slider:before          {background-color: #a78a7f;} /* boule du slider */


/* --------------------------------------------------------------------- */
/* Toggle switch */
/* --------------------------------------------------------------------- */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  -webkit-transition: .4s;
  transition: .4s;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

#label_switch {
  display:inline;
  font-size: 16px;
}



/* --------------------------------------------------------------------- */
/* Languages */
/* --------------------------------------------------------------------- */


#language-selector label {
    font-size: 16px;
    color: #333;
}

#language-selector select {
    padding: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
    cursor: pointer;
}

#language-selector select:hover {
    border-color: #007bff;
}


/* --------------------------------------------------------------------- */
/* Buttons */
/* --------------------------------------------------------------------- */

.button_side button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}


/* --------------------------------------------------------------------- */
/* Flashcard */
/* --------------------------------------------------------------------- */

#flashcard-container {
    text-align: center;
    margin-top: 60px;
}

#flashcard {
    width: 300px;
    height: 200px;
    position: relative;
    perspective: 1000px;
    margin-bottom: 20px;
}

#flashcard.flipped #question {
    transform: rotateY(180deg);
}

#flashcard.flipped #answer {
    transform: rotateY(360deg);
}

#question {
    transform: rotateY(0deg);
}

#answer {
    transform: rotateY(180deg);
}

.face {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.6s;
}


/* --------------------------------------------------------------------- */
/* Flashcard options */
/* --------------------------------------------------------------------- */


#score-container {
    margin-bottom: 20px;
    font-size: 18px;
}

#next-card {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#result-buttons {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

#result-buttons button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#edit-mode {
    margin-top: 20px;
}

#edit-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 300px;
    margin: 0 auto;
}

#edit-form input {
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#edit-form button {
    padding: 10px;
    font-size: 16px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#edit-form button:hover {
    background-color: #218838;
}

#confirmation-message {
    color: #28a745;
    margin-top: 10px;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

#confirmation-message.fade-out {
    opacity: 0;
}

#list-mode {
    margin-top: 20px;
}

#card-list {
    list-style-type: none;
    padding: 0;
}

#card-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: white;
}

#card-list li .delete-icon {
    color: #dc3545;
    cursor: pointer;
}

#card-list li .delete-icon:hover {
    color: #c82333;
}


#save-local-button {
    background-color: #6c757d;
    color: white;
}

#save-local-button:hover {
    background-color: #5a6268;
}

.emoji {
    font-size: 58px;
}