/* ***************************** CSS for Main Display ***************************** */
#srs_display{
    position: absolute;
    margin: 0 auto;
    top: 107px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 1;
    /* padding: 0px 10px 0px 10px; */
    overflow-y: auto;
    background-color: #ecebeb;
    /* height: 83vh; */
    width: 95vw;
    /* height:75vh; */
    /* max-height: 81vh;
    min-height: 40vh; */
    left: 50%;
    transform: translate(-50%);
    z-index: 0;
    /* Flexbox setup to enable bottom positioning */
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}
#srs_display_title{
    text-align: center;
    font-size: 20px;
    color:brown;
    font-weight: bold;
    margin:10px 0px;
}
#srs_display_question, #srs_display_answer{
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center horizontally */
    height:70vh;
    width: 100%;
    /* background-color: bisque; */
    margin: 0 auto;
    border-radius: 10px;
    display:none;
}
#srs_display_question{
    display:block;
}

#srs_answer_buttons_text{
    margin-top: 10px;
}
#question_area, #answer_area{
    /* UPDATED: Use flex: 1 to fill available space instead of fixed height */
    /* flex: 1; */
    width:95%;
    background-color:aliceblue ;
    margin-top: 10px;
    border-radius: 10px;
    margin:0 auto;
    height:400px;
    margin-top: 20px;
    /* REMOVED: margin-bottom and fixed height to allow flex push */
}
#question_navigation_area, #answer_navigation_area{
    /* NEW: Push navigation to bottom, stack vertically, center contents */
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

#show_answer_text{
    margin:10px 0px;
    text-align: center;
    /* NEW: Ensure it doesn't stretch */
    align-self: center;
}
#srs_answer_buttons_text{
    /* UPDATED: Flex row for texts, full width with max constraint */
    display: flex;
    justify-content: space-around;
    width: 100%;
    max-width: 500px;
    margin-bottom: 5px; /* Small gap to buttons */
}
#srs_answer_buttons{
    /* UPDATED: Flex row for buttons, full width with max constraint */
    display: flex;
    justify-content: space-around;
    width: 100%;
    max-width: 500px;
}
/* UPDATED: Style for individual text labels to center within flex space */
#easy_button_text, #good_button_text, #hard_button_text, #again_button_text {
    flex: 1; /* Equal width distribution */
    text-align: center;
    font-size: 15px; /* Adjust size for better fit */
    font-weight: bold; /* Make texts stand out */
}
.cls_button_display_text{
    font-size: 16px;
}

#question_data{
    display:none;
}


#foreignWord{
    font-size: 50px;
    color:dodgerblue;
    padding: 50px 0px 30px 0px;
    text-align: center;
}
#foreignAudio{
    text-align: center;
}

/* ************************ Answer Screen ************************ */
#englishWord{
    font-size: 40px;
    text-align: center;
    padding-top: 40px;
    color:brown;
}        

#comment{
    font-size: 13px;
    text-align: center;
    padding:10px 0px;
}

#partOfSpeech{
    font-size: 18px;
    text-align: center;
    color:darkblue;
    padding:10px 0px;
}        

#foreignSentence{
    font-size: 30px;
    text-align: center;
    color:darkgreen;
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 20px;
}

#englishSentence{
    font-size: 20px;
    text-align: center;
    color:darkblue;
    font-family: Arial, Helvetica, sans-serif;
}        

#rank{
    font-size: 20px;
    text-align: center;
    padding-bottom: 50px;
}

#answerButtons{
    text-align: center;
}

.options-btn {
  position: absolute; /* Positions it relative to the parent container */
  bottom: 10px; /* Distance from the bottom */
  left: 10px; /* Distance from the left */
  background: #f0f0f0; /* Light background */
  border: 1px solid #ddd; /* Subtle border */
  border-radius: 4px; /* Rounded corners */
  width: 24px; /* Small width */
  height: 24px; /* Small height */
  font-size: 16px; /* Icon size */
  cursor: pointer; /* Hand cursor on hover */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* No extra padding */
}

.options-btn:hover {
  background: #e0e0e0; /* Hover effect */
}


/* ***************************** CSS for SRS Options ***************************** */

#srs_options{
    position: absolute;
    margin: 0 auto;
    top: 90px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 1;
    /* padding: 0px 10px 0px 10px; */
    overflow-y: auto;
    background-color: #ecebeb;
    /* height: 83vh; */
    width: 95vw;
    max-height: 90vh;
    min-height: 40vh;
    left: 50%;
    transform: translate(-50%);
    z-index: 0;
    display:none;
}
#srs_options_title{
    text-align: center;
    font-size: 20px;
    color:brown;
    font-weight: bold;
    margin:10px 0px;
}
#txtNumberOfWordsPerDay{
    font-size: 18px;
    text-align: center;
}
#srs_options_word_number{
    margin-left: 25px;
    margin-bottom: 10px;
}
#srs_advanced_options{
    position: relative;
    display: flex;
    flex-direction: column;
    width:300px;
    height:275px;
    border: 1px solid brown;
    border-radius: 10px;
    left: 50%;
    transform: translate(-50%);
    padding: 10px;
    box-sizing: border-box;
}
#srs_instructions{
    font-size: 15px;
    color:crimson;
    font-style: italic;
    margin-bottom: 10px;
    margin-left: 10px;
}
#srs_advanced_title{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color:darkgreen;
    margin:10px 0px;
}
.clsTxtOptions{
    font-size: 16px;
    color:darkblue;
    width:120px;
}
.clsOptionLabels{
    font-size:18px;
    padding-bottom: 10px;
    flex: 1;
}
.srs-option-row {
    display: flex;
    flex-direction: row;
    align-items:start;
    margin-bottom: 10px;
    gap: 10px;
}

#srs_options_buttons, #srs_options_buttons1, #srs_options_buttons2{
    display: flex;
    justify-content: space-around;
    margin:10px 0px 20px 0px;
}

#srs_options_buttons3{
    display:flex;
    flex-direction: column;
    align-items: center;
    margin:10px 0px;
    display:none;
}

#uploadBtn{
    width:200px;
    display:none;
}



.alert-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    justify-content: center;
    align-items: center;
}

.alert-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    text-align: center;
    border-radius: 8px;
    position: relative;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

/*************** CSS for Inflection Modal *********************/
#practice-inflection-content{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 600px;
    border-radius: 10px;
    background-color: white;
    width: fit-content; /* Adapt to content width */
    min-width: 380px; /* Match title/footer width */
}


#inflection-title, #inflection-word, #inflection-english {
    padding: 5px;
    text-align: center;
    color:white;
    font-size:20px;
    font-family: Arial, sans-serif;
    width:100%;
}

#inflection-title{
    border-radius:10px 10px 0px 0px;
}  

#inflection-word{
    background-color:white;
    font-size: 25px;
}

#inflection-english{
    color:darkblue;
    background-color:white;
    font-size:15px;
}

.inflection-row {
    display: flex;
    border-bottom: 1px solid #ddd;
    width:100%;
}

.inflection-cell {
    flex: 1;
    padding: 5px;
    text-align: left;
    font-family: Arial, sans-serif;
    font-size:15px;
    width:150px;
}

.flex-inflection-cell-title {
    padding: 5px;
    width:150px;
    font-size: 14px;
}

#practice-inflection-footer{
    text-align:center;
    border-radius: 0px 0px 10px 10px;
    padding:10px;
}

#inflection-title{
    border-radius: 10px 10px 0px 0px;
}

#practice-inflection-body{
    overflow-x: auto;
    white-space: nowrap;
}

#practice-inflection-body > div {
    width:600px;
}






/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1180px) 
and (orientation : landscape) {
    #srs_display_question, #srs_display_answer{
        height: 62vh;
    }

    #srs_display_title{
        font-size: 40px;
    }
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 750px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    #srs_display{
        top: 150px;
    }
    
    #srs_display_question, #srs_display_answer{
        height: 45vh;
    }

    #srs_display_title{
        font-size: 30px;
    }  

}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
    #srs_display{
        width: 50vw;
        height:60%;
    }
    #srs_display_title{
        font-size: 30px;
    }  
    
    #srs_options{
        width: 400px;
    }  
    

}