/* RESET & BASE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f9f9f9;
    padding: 10px;
    line-height: 1.5;
    color: #333;
}

/* MAIN CONTAINER */
.container {
    max-width: 1400px; /* Super wide desktop view */
    width: 95%; /* Ensures responsiveness, taking 95% of viewport width */
    margin: auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: relative;
}

.container::after {
    content: "";
    display: table;
    clear: both;
}

/* --- TEST HEADER CONTAINER --- */
.test-header {
    display: flex;
    flex-wrap: wrap; /* Crucial: Allows items to wrap to the next line */
    align-items: center; /* Vertically centers items when on the same line, or when stacking on mobile (for default) */
    padding-bottom: 10px;
    border-bottom: 4px solid #4CAF50;
    margin-bottom: 20px;
    position: relative;
}

/* --- TITLE WRAPPER --- */
.test-title-wrapper {
    width: 100%; /* Forces the title onto its own line on desktop */
    text-align: center; /* Centers the title horizontally on its line */
    margin-bottom: 10px; /* Add some space below the title before next elements */
}

/* --- TITLE --- */
.test-title,
h1 {
    font-size: 2rem;
    margin: 0;
    padding: 0;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* --- QUESTION COUNTER --- */
.question-counter-right {
    font-size: 1rem;
    color: #777;
    white-space: nowrap;
    margin-left: auto; /* Pushes this and subsequent items to the right of their *current line* */
    margin-right: 15px; /* Space between counter and review button */
}

/* --- REVIEW WRONG ANSWERS BUTTON --- */
.btn-review-wrong {
    padding: 8px 12px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.9em;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-review-wrong:hover {
    background-color: #d32f2f;
    transform: translateY(-1px);
}

/* --- NAVIGATION BUTTONS WRAPPER (New) --- */
.nav-buttons-wrapper {
    width: 100%; /* Ensure it takes full width for centering */
    text-align: center; /* Centers the flex container within it */
    margin: 20px 0; /* Space above and below the navigation buttons block */
}

/* --- NAVIGATION BUTTONS (Flex container for actual buttons) --- */
.navigation-buttons {
    display: flex;
    justify-content: center; /* Center the buttons within the wrapper */
    gap: 15px;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

.nav-btn {
    padding: 12px 24px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.nav-btn:hover {
    background-color: #3e8e41;
    transform: translateY(-1px);
}

/* --- QUESTION CONTAINER --- */
.question-container {
    padding: 16px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    margin-bottom: 10px;
    max-width: 100%;
}

/* --- QUESTION TEXT --- */
.question-text {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

/* --- OPTIONS --- */
.options {
    display: flex;
    flex-direction: column;
}

.options label {
    display: block;
    margin-bottom: 24px;
    font-size: 1rem;
    line-height: 1.6;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    margin-right: 10px;
    margin-left: 10px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.options label:hover {
    background-color: #f0f0f0;
    border-color: #999;
    cursor: pointer;
}

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

/* --- SUBMIT BUTTON --- */
.submit-button-container {
    text-align: center;
    margin-top: 30px;
}

.btn-submit {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-submit:hover {
    background-color: #45a049;
    transform: translateY(-1px);
}

/* --- IMAGES --- */
.question-image,
.image-container {
    text-align: center;
    margin-top: 16px;
}

.question-img,
.image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid #ccc;
    display: block;
    margin: 0 auto 20px;
}

.answer-image {
    margin-top: 15px;
}

.answer-image img {
    margin-bottom: 10px;
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- FEEDBACK / RESULT --- */
.result-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #ddd;
}

.result.correct {
    color: #28a745;
    font-weight: bold;
    text-align: center;
    margin-top: 12px;
    font-size: 1.1rem;
}

.result.incorrect {
    color: #dc3545;
    font-weight: bold;
    text-align: center;
    margin-top: 12px;
    font-size: 1.1rem;
}

.explanation {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
    font-size: 0.95rem;
    color: #555;
}

.references {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
    font-size: 0.9rem;
    color: #666;
}

.indented-references {
    padding-left: 20px;
    list-style-type: disc;
}

.indented-references li {
    margin-bottom: 5px;
}

.indented-references a {
    color: #007bff;
    text-decoration: none;
}

.indented-references a:hover {
    text-decoration: underline;
}

/* --- BACK BUTTONS (General) --- */
.back-container,
.back-links {
    text-align: center;
    margin-top: 30px;
}

.back-btn {
    display: inline-block;
    margin: 6px 10px;
    padding: 10px 18px;
    background-color: #2196F3;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.back-btn:hover {
    background-color: #1976D2;
    transform: translateY(-1px);
}

/* --- VENDOR / EXAM / TEST BUTTONS CONTAINER --- */
.vendor-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

/* --- VENDOR / EXAM / TEST BUTTONS STYLING --- */
.vendor-btn,
.exam-btn,
.test-btn,
.settings-btn {
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    color: white;
    background-color: #007bff;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    min-width: 200px;
    margin-bottom: 25px;
}

.exam-btn {
    background-color: #28a745;
}

.test-btn {
    background-color: #ff9800;
}

.vendor-btn:hover,
.exam-btn:hover,
.test-btn:hover,
.settings-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.exam-btn:hover {
    background-color: #218838;
}

.test-btn:hover {
    background-color: #e68900;
}

/* --- ERROR MESSAGE --- */
.error-message {
    color: #dc3545;
    font-weight: bold;
    text-align: center;
    margin: 20px 0;
    padding: 10px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
}

/* --- Settings Button Section for Index.php --- */
.settings-section {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* Styles for the Settings Button (matching other main buttons) */
.settings-btn {
    background-color: #6c757d;
}

.settings-btn:hover {
    background-color: #5a6268;
}

/* --- NEW STYLES FOR REVIEW BUTTONS (If separate from btn-review-wrong) --- */
.review-wrong-answers-container {
    text-align: center;
    margin: 20px 0;
}

.review-btn,
.back-to-test-btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #dc3545;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin: 5px;
}

.review-btn:hover,
.back-to-test-btn:hover {
    background-color: #c82333;
    transform: translateY(-2px);
}

.back-to-test-btn {
    background-color: #6c757d;
}

.back-to-test-btn:hover {
    background-color: #5a6268;
}


/* ==================================== */
/* --- RESPONSIVE MEDIA QUERIES --- */
/* ==================================== */

/* Tablets and smaller (max-width: 768px) */
@media (max-width: 768px) {
    .container {
        padding: 10px;
        width: 98%;
    }

    /* --- Test Header Adjustments (Tablet) --- */
    .test-header {
        flex-direction: column; /* Stack all items vertically */
        align-items: center; /* Keeps title centered */
        padding-bottom: 5px;
    }

    /* --- Title Wrapper Adjustments (Tablet) --- */
    .test-title-wrapper {
        width: 100%; /* Keep full width when stacked */
        text-align: center; /* Keep title centered */
        margin-bottom: 10px; /* Space below title */
    }

    /* --- Title Adjustments (Tablet) --- */
    .test-title,
    h1 {
        font-size: 1.75rem;
    }

    /* --- Question Counter Adjustments (Tablet) --- */
    .question-counter-right {
        margin-left: 0; /* Remove auto-margin for desktop behavior when stacking */
        align-self: flex-end; /* NEW: PUSHES IT TO THE RIGHT WHEN STACKED */
        margin-bottom: 10px; /* Space below it */
    }

    /* --- Review Button Adjustments (Tablet) --- */
    .btn-review-wrong {
        margin-left: 0; /* Remove left margin when stacked */
        margin-top: 5px; /* Space above the button if it wraps below counter */
        align-self: flex-end; /* NEW: PUSHES IT TO THE RIGHT WHEN STACKED */
    }

    /* --- Navigation Buttons Wrapper (Tablet) --- */
    .nav-buttons-wrapper {
        margin: 10px 0; /* Reduced vertical space */
    }

    .question-container {
        margin-bottom: 5px;
    }

    /* General button adjustments */
    .vendor-btn,
    .exam-btn,
    .test-btn,
    .settings-btn {
        font-size: 16px;
        padding: 12px 25px;
        width: 48%;
        margin: 1%;
    }

    h2 {
        font-size: 20px;
    }

    .options label {
        font-size: 1.1rem;
        margin-bottom: 20px;
        padding: 10px;
        margin-left: 2px;   /* ADDED/ADJUSTED */
        margin-right: 2px;  /* ADDED/ADJUSTED */
    }

    .nav-btn,
    .back-btn,
    .btn-submit {
        font-size: 0.9rem;
        padding: 10px 18px;
    }

    .review-btn,
    .back-to-test-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* Phones (max-width: 480px) */
@media (max-width: 480px) {
    body {
        padding: 5px;
    }

    .container,
    .question-form {
        padding: 5px;
        width: 100%;
    }

    /* --- Test Header Adjustments (Phone) --- */
    .test-header {
        padding-bottom: 5px;
        margin-bottom: 15px;
    }

    /* --- Title Wrapper Adjustments (Phone) --- */
    .test-title-wrapper {
        margin-bottom: 8px; /* Tighter spacing when stacked */
    }

    /* --- Title Adjustments (Phone) --- */
    .test-title,
    h1 {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    /* --- Question Counter (Phone) --- */
    .question-counter-right {
        font-size: 0.85rem;
        margin-bottom: 8px;
        align-self: flex-end; /* NEW: PUSHES IT TO THE RIGHT WHEN STACKED */
    }

    /* --- Review Button Adjustments (Phone) --- */
    .btn-review-wrong {
        padding: 6px 10px;
        font-size: 0.75em;
        margin-top: 5px; /* Ensure space if it wraps */
        align-self: flex-end; /* NEW: PUSHES IT TO THE RIGHT WHEN STACKED */
    }

    /* --- Navigation Buttons Wrapper (Phone) --- */
    .nav-buttons-wrapper {
        margin: 8px 0; /* Minimal vertical space */
    }

    .question-container {
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 0px;
    }

    /* FIX: Standardize .question-text font size on small screens to 1.2rem */
    /* Removed: font-size: 1rem; */ 
    .question-text {
        /* font-size: 1rem;  This line was removed/commented out */
    }

    .options label {
        /*font-size: 0.95rem;*/
        margin-bottom: 12px;
        padding: 6px;
        margin-left: 2px;   /* ADDED/ADJUSTED */
        margin-right: 2px;  /* ADDED/ADJUSTED */
    }

    .btn-submit,
    .nav-btn,
    .back-btn {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    .vendor-btn,
    .exam-btn,
    .test-btn,
    .settings-btn {
        font-size: 14px;
        padding: 8px 15px;
        width: 100%;
        margin: 8px 0;
    }

    .review-btn,
    .back-to-test-btn {
        width: 100%;
        margin-bottom: 10px;
        font-size: 0.85rem;
        padding: 8px 15px;
    }

    .navigation-buttons {
        gap: 8px;
    }
}

/* Add these rules to your existing styles.css or a new file like test_styles.css */

/* --- Styling for highlighting options --- */

.option-label.correct-option {
    color: #1a7f37; /* A nice green for correct text */
    font-weight: bold;
    background-color: #e6ffe6; /* Light green background */
    padding: 8px 12px; /* Slightly more padding for a better look */
    border-radius: 6px;
    border: 1px solid #1a7f37;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transition */
}

.option-label.incorrect-option {
    color: #b30000; /* A strong red for incorrect text */
    font-weight: bold;
    background-color: #ffe6e6; /* Light red background */
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #b30000;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Base style for the label containing the input and text */
.options label {
    display: flex; /* Aligns the input and text horizontally */
    align-items: flex-start; /* Aligns items to the top if text wraps */
    margin-bottom: 12px; /* Provides spacing between options */
    cursor: pointer; /* Indicates it's clickable */
    /* Remove padding/border from here if using on .option-label */
}

/* Adjust spacing for the actual radio/checkbox input */
.options label input[type="radio"],
.options label input[type="checkbox"] {
    margin-top: 5px; /* Adjusts vertical alignment of the input with the text */
    margin-right: 12px; /* Spacing between the input and the text */
    flex-shrink: 0; /* Prevents the input from shrinking */
    transform: scale(1.1); /* Slightly larger inputs */
}

/* Optional: Visually disable inputs after submission */
.question-form.submitted .options input {
    pointer-events: none; /* Prevents clicks on radio/checkbox */
    opacity: 0.7; /* Make them slightly faded */
}

/* Ensure the submit button is styled consistently */
.btn-submit {
    padding: 10px 20px;
    background-color: #007bff; /* Example blue */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

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

/* Styles for result messages */
.result-section .result {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

.result.correct {
    color: #1a7f37;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

.result.incorrect {
    color: #b30000;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

/* Explanation and References Styling */
.explanation, .references {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 15px;
    margin-top: 20px;
    border-radius: 8px;
}

.explanation p, .references p {
    margin-bottom: 10px;
    line-height: 1.6;
}

.indented-references {
    margin-left: 20px;
    padding-left: 0;
    list-style: disc;
}

.indented-references li {
    margin-bottom: 5px;
}

/* --- Login Page Specific Styles --- */

/* Centering the login form vertically and horizontally */
html, body {
    height: 100%; /* Ensure html and body take full viewport height */
    margin: 0;
    padding: 0;
}

.login-page-wrapper {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
    min-height: 100vh;       /* Take at least full viewport height */
    background-color: #e0e0e0; /* A slightly different background for the login page */
    padding: 20px; /* Add some padding in case content is larger than viewport */
    box-sizing: border-box; /* Include padding in height calculation */
}

.login-form-container {
    max-width: 400px;
    width: 100%; /* Make it fluid up to max-width */
    padding: 30px;
    background-color: #fff; /* White background for the form itself */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* More prominent shadow */
    text-align: center;
}

.login-form-container h1 {
    margin-bottom: 25px;
    color: #333;
    font-size: 2rem; /* Consistent with other h1s */
}

/* Company Logo Styling */
.company-logo {
    max-width: 80%; /* Responsive width */
    height: auto;
    margin-bottom: 20px; /* Space below the logo */
    border-radius: 5px; /* Slightly rounded corners for the logo */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for the logo */
}

.login-form-group {
    margin-bottom: 15px;
    text-align: left;
}
.login-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}
.login-form-group input[type="text"],
.login-form-group input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc; /* Slightly darker border */
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
}
.login-submit-btn {
    background-color: #007bff;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%;
}
.login-submit-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}
.login-error {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* --- Responsive Adjustments for Login Page (within your existing media queries) --- */

/* Tablets and smaller (max-width: 768px) */
@media (max-width: 768px) {
    .login-form-container {
        margin: 20px auto; /* Reduce top/bottom margin on smaller screens */
        padding: 25px;
    }
    .login-form-container h1 {
        font-size: 1.75rem;
    }
    .company-logo {
        max-width: 70%; /* Adjust logo size */
    }
}

/* Phones (max-width: 480px) */
@media (max-width: 480px) {
    .login-page-wrapper {
        padding: 10px;
    }
    .login-form-container {
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .login-form-container h1 {
        font-size: 1.5rem;
    }
    .company-logo {
        max-width: 60%; /* Smaller logo on phones */
    }
    .login-form-group input[type="text"],
    .login-form-group input[type="password"],
    .login-submit-btn {
        padding: 10px;
        font-size: 1rem;
    }
}
/* --- Global Base Styles (ensure these are present at the very top of your CSS) --- */
html, body {
    height: 100%; /* Important for vertical centering with flexbox on body */
    margin: 0;
    padding: 0;
}
/* Your existing * { margin: 0; padding: 0; box-sizing: border-box; } and global body styles go here */


/* --- Login Page Specific Styles --- */

/* --- Login Page Specific Styles --- */

/* Global base styles for html, body (ensure these are at the very top of your CSS if not already) */
html, body {
    height: 100%; /* Crucial for vertical centering with flexbox on body */
    margin: 0;
    padding: 0;
}

/* This targets the body ONLY when it has the 'login-page-body' class */
/* This is the reliable way to center the form on the login page */
body.login-page-body {
    display: flex;
    flex-direction: column; /* Stack items vertically if needed, though usually just the form */
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
    min-height: 100vh;       /* Ensure it takes full viewport height */
    background-color: #e0e0e0; /* A distinct background for the login page */
    padding: 20px; /* Add some padding around the form on larger screens */
    box-sizing: border-box; /* Include padding in height calculation */
    overflow-y: auto; /* Allow vertical scrolling if content exceeds viewport height (e.g., virtual keyboard) */
    text-align: center; /* Default text alignment for children */
}

.login-form-container {
    max-width: 400px; /* Max width for desktop/laptop */
    width: 100%; /* Will take full width of its flex container (body) up to max-width */
    padding: 30px;
    background-color: #fff;
    border-radius: 10px; /* Slightly more rounded corners for consistency */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    /* Remove explicit margin-top/auto if it exists, as flexbox on body handles centering */
}

.login-form-container h1 {
    margin-bottom: 25px;
    color: #333;
    font-size: 2rem; /* Consistent with other h1s */
}

/* Company Logo Styling */
.company-logo {
    max-width: 100%; /* Ensures it never overflows its parent */
    height: auto;    /* Maintains aspect ratio */
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.login-form-group {
    margin-bottom: 15px;
    text-align: left; /* Align labels/inputs left within their group */
}
.login-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}
.login-form-group input[type="text"],
.login-form-group input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box; /* Include padding in width */
}
.login-submit-btn {
    background-color: #007bff;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%; /* Ensure button takes full width */
}
.login-submit-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}
.login-error {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* --- Responsive Adjustments for Login Page --- */

/* Tablets and smaller (max-width: 768px) */
@media (max-width: 768px) {
    body.login-page-body {
        padding: 15px; /* Slightly reduce padding on tablets */
    }
    .login-form-container {
        padding: 25px; /* Adjust padding for tablet size */
        width: 90%; /* Give it a little more breathing room */
        max-width: 380px; /* Cap its width even on tablets */
    }
    .login-form-container h1 {
        font-size: 1.8rem; /* Slightly smaller heading */
    }
    .company-logo {
        max-width: 90%; /* Logo can scale up a bit more on tablets */
    }
    .login-form-group input[type="text"],
    .login-form-group input[type="password"] {
        padding: 10px; /* Reduce input padding */
        font-size: 0.95rem;
    }
    .login-submit-btn {
        padding: 10px 20px; /* Reduce button padding */
        font-size: 1rem;
    }
}

/* Phones (max-width: 480px) */
@media (max-width: 480px) {
    body.login-page-body {
        padding: 10px; /* Minimal padding on phones */
    }
    .login-form-container {
        padding: 20px; /* Less padding, more content space */
        border-radius: 5px; /* Slightly less rounded corners */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        width: 100%; /* Ensure it always takes full available width */
        max-width: 300px; /* Optional: A slightly smaller max-width for very small devices if needed */
    }
    .login-form-container h1 {
        font-size: 1.5rem; /* Smaller heading on phones */
        margin-bottom: 15px;
    }
    .company-logo {
        max-width: 100%; /* Ensure it fills the container as much as possible */
        margin-bottom: 15px;
    }
    .login-form-group {
        margin-bottom: 10px; /* Tighter spacing */
    }
    .login-form-group label {
        font-size: 0.9rem;
    }
    .login-form-group input[type="text"],
    .login-form-group input[type="password"] {
        padding: 8px; /* Smallest input padding */
        font-size: 0.9rem;
    }
    .login-submit-btn {
        padding: 10px 15px;
        font-size: 0.95rem;
    }
    .login-error {
        font-size: 0.85em;
        padding: 8px;
    }
}

/* Existing styles */

.explanation ul,
.explanation ol {
    padding-left: 0.7em;  /* or margin-left */
}

/* Add these rules to your existing CSS file, preferably near .question-text rules */

/* Target unordered lists within the question text */
.question-text ul {
    padding-left: 7em; /* Adjust this value as needed for desired indentation */
    list-style-type: disc; /* Ensures consistent bullet points */
}

/* Target ordered lists within the question text */
.question-text ol {
    padding-left: 7em; /* Adjust this value as needed for desired indentation */
    list-style-type: decimal; /* Ensures consistent numbering */
}

/* Ensure the list markers (bullets/numbers) are inside the padding for cleaner alignment */
.question-text ul li,
.question-text ol li {
    list-style-position: inside;
}

/* Status indicator line under title */
.status-indicator {
    width: 100%;
    height: 3px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.status-unanswered {
    background-color: #666; /* Gray for unanswered */
}

.status-correct {
    background-color: #28a745; /* Green for correct */
}

.status-incorrect {
    background-color: #dc3545; /* Red for incorrect */
}

/* Test question navigation and bookmarks */
.question-navigator {
    margin: 0 0 20px;
    border: 1px solid #d7dee7;
    border-radius: 8px;
    background: #f8fafc;
}

.question-navigator summary {
    cursor: pointer;
    padding: 12px 14px;
    color: #1f2937;
    font-weight: 700;
}

.question-navigator summary span {
    color: #64748b;
    font-size: 0.85em;
    font-weight: 400;
}

.question-navigator-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    padding: 0 14px 14px;
}

.question-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 4px 8px;
    border: 1px solid #b9c5d3;
    border-radius: 6px;
    color: #1d4ed8;
    background: #fff;
    font-weight: 700;
    text-decoration: none;
}

.question-number:hover,
.question-number:focus-visible {
    border-color: #1d4ed8;
    outline: 2px solid #93c5fd;
    outline-offset: 1px;
}

.question-number.is-current {
    color: #fff;
    border-color: #2563eb;
    background: #2563eb;
}

.question-number.is-bookmarked::after {
    content: '\2605';
    margin-left: 3px;
    color: #f59e0b;
    font-size: 0.7em;
}

.question-number.is-current.is-bookmarked::after {
    color: #fde68a;
}

.navigation-row {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 44px;
    margin: 16px 0;
}

.navigation-row .navigation-buttons {
    margin: 0;
    padding: 0 150px;
}

.bookmark-button {
    position: absolute;
    right: 0;
    top: 0;
    padding: 8px 10px;
    border: 1px solid #b9c5d3;
    border-radius: 6px;
    color: #334155;
    background: #fff;
    cursor: pointer;
    font: inherit;
}

.bookmark-button:hover,
.bookmark-button:focus-visible {
    border-color: #d97706;
    outline: 2px solid #fde68a;
    outline-offset: 1px;
}

.bookmark-button.is-bookmarked {
    color: #92400e;
    border-color: #f59e0b;
    background: #fffbeb;
}

@media (max-width: 768px) {
    .navigation-row {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        height: auto;
    }

    .navigation-row .navigation-buttons {
        padding: 0;
    }

    .bookmark-button {
        position: static;
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    .question-navigator-links {
        gap: 6px;
        padding: 0 10px 10px;
    }

    .question-number {
        min-width: 34px;
        min-height: 34px;
        padding: 3px 6px;
    }

    .navigation-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin: 12px 0;
    }

    .navigation-row .navigation-buttons {
        padding: 0;
    }

    .bookmark-button {
        position: static;
        align-self: stretch;
    }
}