/* General Styling */
body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    color: #333;
}

/* Container Styling */
.container {
    width: 95%;
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fafafa;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

/* Welcome Screen Styling */
#welcome-screen {
    text-align: center;
}

#welcome-screen h2 {
    color: #007bff;
    margin-bottom: 20px;
    font-size: 28px;
}

#welcome-screen p {
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
    text-align: center;
}

/* Disclaimer Styling */
#welcome-screen p.disclaimer {
    font-size: 14px;
    color: #d9534f; /* Red color for warning */
    margin-top: 30px;
    line-height: 1.5;
    background-color: #f9ecec;
    padding: 15px;
    border-left: 4px solid #d9534f;
    border-radius: 4px;
    text-align: left;
}
/* Video container */
.video-container {
    text-align: center;
    margin: 20px auto;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 700px;
}

/* Video heading */
.video-heading {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

/* Instructions Box */
.instructions-box {
    width: 95%;
    max-width: 1200px; /* Same maximum width as the chat box */
    margin: 50px auto;  /* Same margin as the chat box */
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 4px;
    text-align: left;
}

.instructions-box p {
    margin-bottom: 15px;
}

.instructions-box ul {
    list-style-type: disc;
    padding-left: 20px;
}

.instructions-box li {
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Form Styling */
form {
	width: 98%;
    max-width: 1200px;
    margin: 50px auto;	
}

/* Translation Options Box Styling */
#translation-options-box {
    margin: 20px auto;
    padding: 20px;
    background-color: #e9ecef;
    text-align: left;
    border-radius: 8px;	
}

/* Translation Options Styling */
#translation-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#translation-options label {
    font-size: 16px;
    color: #333;
    margin-right: 10px;
    cursor: pointer;
}

#translation-toggle {
    margin-right: 10px;
}

#language-selection {
    margin-top: 20px;
    width: 100%;
}

/* Grid for Language Selection */
#language-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 10px;
    padding: 10px;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 4px;
}

.language-button {
    padding: 10px;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
    font-size: 14px;
}

.language-button:hover {
    background-color: #007bff;
    color: white;
}

/* Selected Language Styling */
.language-button.selected {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* Test Selection Styling */
#test-selection {
    margin-top: 30px;
    text-align: left;
}

#test-selection p {
    font-weight: bold;
    margin-bottom: 10px;
}

#test-selection label {
    font-size: 16px;
    color: #333;
    cursor: pointer;
    display: block;
    margin-bottom: 5px;
}

/* Address Input Styling */
#address-input {
    margin-top: 30px;
    text-align: left;
}

#address-input label {
    font-size: 16px;
    color: #333;
    display: block;
    margin-bottom: 5px;
}

#address-input input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

/* Start Button Styling */
#start-btn {
    padding: 12px 24px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    margin-top: 30px;
    width: 100%;
    max-width: 200px;
}

#start-btn:hover {
    background-color: #218838;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Chat Container Styling */
#chat-container {
    width: 95%;
    margin: 50px auto;
    padding: 20px;
    background-color: #f3f3f3;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* Chat Box Styling */
#chat-box {
    height: 400px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
    background: #fff;
    border-radius: 4px;
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding and border in width */
}

/* Input and Button Styling */
#user-input {
    width: 100%; /* Set width to 100% to match the chat-box */
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    font-size: 16px;
    box-sizing: border-box; /* Include padding and border in width */
}

/* General Button Styling */
button {
    padding: 5px 5px;
    margin-top: 10px;
    font-size: 14px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
	width: 100%; /* Full width within its container */
    max-width: 150px; /* Smaller max width */
	height: 35px;
    margin-right: 10px;
    display: inline-block;
}

/* Record Button */
#record-btn {
    background-color: #007bff;
}

#record-btn:hover {
    background-color: #0056b3;
}

/* Send Button */
#send-btn {
    background-color: #007bff;
}

#send-btn:hover {
    background-color: #0056b3;
}

/* Listen Button */
#listen-btn {
    background-color: #17a2b8;
}

#listen-btn:hover {
    background-color: #117a8b;
}

/* Listen Button */
#listen-btn-alt {
    background-color: #17a2b8;
}

#listen-btn-alt:hover {
    background-color: #117a8b;
}

/* Next Test Button */
#next-test-btn {
    background-color: #6f42c1;
}

#next-test-btn:hover {
    background-color: #5931a9;
}

/* Test Result Button */
#test-result-btn {
    background-color: #28a745; /* Green color */
}

#test-result-btn:hover {
    background-color: #218838; /* Darker green on hover */
}

/* Reset Button */
#reset-btn {
    background-color: #ffc107;
    color: #212529;
}

#reset-btn:hover {
    background-color: #e0a800;
}

/* Additional Element Styling */
#mic-btn {
    border: none;
    background-color: transparent;
    cursor: pointer;
}

#mic-btn img {
    width: 24px;
    height: 24px;
}

/* Question, Answer, and Evaluation Styling */
.question, .translation, .answer, .evaluation {
    padding: 8px;
    margin: 5px 0;
    border-radius: 4px;
}

.question {
    background-color: #e7f3fe;
}

.translation {
    background-color: #e7f3f1;
}

.answer {
    background-color: #e2e2e2;
    text-align: right;
}

.evaluation {
    background-color: #d1e7dd;
    text-align: center;
}

.feedback, .summary {
    background-color: #f0f0f0;
    padding: 8px;
    margin: 5px 0;
    text-align: center;
    border-radius: 4px;
}

.summary {
    background-color: #dff0d8;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Adjust container padding */
    .container {
        padding: 15px;
    }

    /* Adjust button sizes */
    button {
        font-size: 14px;
        padding: 8px 12px;
    }

    /* Adjust input sizes */
    #user-input, #address-input input {
        font-size: 14px;
    }

    /* Adjust language grid columns */
    #language-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
	
	#button-group {
        flex-direction: column;
    }
}

/* N400 Test Specific Styles */

/* Instructions Styling */
#instructions {
    text-align: center;
}

#instructions h2 {
    color: #007bff;
    margin-bottom: 20px;
    font-size: 28px;
}

/* Instructions Box */
.instructions-box {
    width: 95%;
    max-width: 1200px; /* Same maximum width as the chat box */
    margin: 50px auto;  /* Same margin as the chat box */
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 4px;
    text-align: left;
}

.instructions-box p {
    margin-bottom: 15px;
}

.instructions-box ul {
    list-style-type: disc;
    padding-left: 20px;
}

.instructions-box li {
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Results Section Styling */
#results-section {
    margin-top: 30px;
    text-align: left;
}

#results-section h3 {
    color: #007bff;
    margin-top: 30px;
    font-size: 24px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

/* Adjusted general paragraph styles */
#results-section p:not(.passed-status) {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

/* Base styling for passed-status remains the same */
.passed-status {
    font-weight: bold;
    font-size: 16px;
}

/* Passed-status styles */
.passed-status.passed {
    color: #28a745; /* Green color */
}

.passed-status.not-passed {
    color: #d9534f; /* Red color */
}

#results-section ul {
    list-style-type: disc;
    padding-left: 40px;
    margin-bottom: 20px;
}

#results-section li {
    margin-bottom: 10px;
    line-height: 1.6;
}

#results-section strong {
    color: #333;
}

#results-section ul ul {
    list-style-type: circle;
    margin-top: 5px;
}

#results-section ul ul li {
    margin-bottom: 5px;
}

#results-section li b {
    color: #007bff;
}


/* Flash Messages Styling */
.flash-messages {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    background-color: #e9ecef;
    border-radius: 4px;
}

.flash-message {
    margin: 0;
    color: #155724;
}

/* Feedback Section Styling */
#feedback-section {
    margin-top: 40px;
    padding: 20px;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 8px;
}

#feedback-section h3 {
    margin-bottom: 15px;
    color: #007bff;
}

#feedback-section form label {
    font-weight: bold;
    color: #333;
}

/* Star Rating Styling */
.star-rating {
    display: inline-block;
}

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

.star-rating label {
    display: inline-block;
    font-size: 30px;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
}

.star-rating label::before {
    content: "\2605"; /* Unicode star character */
}

.star-rating input[type="radio"]:checked ~ label {
    color: #f5b301; /* Orange color for selected stars */
}

.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #f5b301; /* Orange color on hover */
}

/* Checkbox Group Styling */
.checkbox-group {
    margin-left: 20px; /* Indent the entire group */
}

.checkbox-option {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-weight: normal; /* Remove bold font */
}

.checkbox-option input[type="checkbox"] {
    margin-right: 10px;
}

/* Demographics Section Styling */
#demographics-section {
    margin-top: 30px;
}

#demographics-section h4 {
    margin-bottom: 10px;
    color: #007bff;
}

#demographics-section p {
    margin-bottom: 15px;
    font-size: 14px;
    color: #555;
}

/* Select and Textarea Styling */
#feedback-section form select,
#feedback-section form textarea,
#feedback-section form input[type="text"] {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    box-sizing: border-box;
    margin-bottom: 15px;
}

/* 'Other' Text Fields Indentation */
#feedback-section form input[type="text"] {
    margin-left: 25px; /* Indent to align with checkboxes */
    width: calc(100% - 35px); /* Adjust width to account for indentation */
}

/* Button Group Styling */
.feedback-button-group {
    display: flex;
    justify-content: flex-start; /* Align buttons to the left */
    gap: 10px; /* Space between buttons */
    margin-top: 20px; /* Optional: Space above the buttons */
}

/* Submit and Reset Buttons Styling */
#submit-feedback-btn, #reset-feedback-btn {
    padding: 12px 24px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    flex: 1; /* Optional: Make buttons take equal width */
    max-width: 200px; /* Optional: Set a maximum width */
}

/* Specific Styling for Submit Button */
#submit-feedback-btn {
    background-color: #28a745; /* Green color */
}

#submit-feedback-btn:hover {
    background-color: #218838;
}

/* Specific Styling for Reset Button */
#reset-feedback-btn {
    background-color: #dc3545; /* Red color */
}

#reset-feedback-btn:hover {
    background-color: #c82333;
}

/* Responsive Design */
@media (max-width: 600px) {
    .star-rating label {
        font-size: 24px;
    }

    .button-group {
        flex-direction: column; /* Stack buttons vertically on small screens */
        align-items: stretch; /* Stretch buttons to full width */
    }

    #submit-feedback-btn, #reset-feedback-btn {
        max-width: none; /* Remove maximum width */
    }
}