/*
  Core styles (body, modals, form-check, etc.) are now in base.css.
  This file contains styles specific to the quiz-taking experience.
*/

.quiz-container {
    max-width: 650px; /* Increased max-width for better display of media */
    margin: 2rem auto; /* Center the container horizontally and add top margin */
    border-radius: 0.75rem; /* Rounded corners */
    padding: 1.5rem; /* Padding inside the container */
    background-color: var(--color-bg-dark); /* Slightly lighter dark background for the quiz area */
    box-shadow: var(--shadow-sm); /* Subtle shadow */
    min-height: 450px; /* Ensure a minimum height for consistent layout */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push navigation to bottom */
    position: relative; /* For absolute positioning of message modal, if used */
}

/* Visually disable options after selection */
.answers-list.disabled-selection .form-check {
    pointer-events: none; /* Disable clicks */
    opacity: 0.7; /* Dim appearance */
    cursor: default;
}

/* Keyboard focus style */
.form-check.focused {
    border: 2px solid var(--color-primary-light); /* Blue border for keyboard focus */
    background-color: var(--color-bg-light); /* Slightly lighter background */
}

.btn-outline-primary {
    color: #4299e1; /* Blue for outline buttons */
    color: var(--color-primary-alt); /* Blue for outline buttons */
    border-color: var(--color-primary-alt);
}

.btn-outline-primary:hover {
    background-color: var(--color-primary-alt);
    color: var(--color-text-white);
}

.btn-success {
    background-color: var(--color-success); /* Green for success button */
    border-color: var(--color-success);
    color: var(--color-text-white);
    transition: all 0.2s ease-in-out;
}

.btn-success:hover {
    background-color: var(--color-success-dark);
    border-color: var(--color-success-dark);
}

/* --- Hint Controls --- */
.hint-controls {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
}

.hint-container { /* Only hint-container remains */
    cursor: pointer;
    color: var(--color-primary-alt); /* Blue for hint link */
    text-decoration: underline;
    font-size: 0.9rem;
    background: none;
    border: none;
    padding: 0;
}

.hint-container:hover {
    text-decoration: none;
    color: var(--color-primary-light);
}

/* --- Drop Zone Override --- */
.drop-zone {
    margin-bottom: 2rem;
}

.drop-zone.dragover {
    border-color: var(--color-primary-alt); /* Blue on dragover */
    color: var(--color-primary-alt);
    background-color: #3b455b; /* This color is not in the palette, can be added */
}




.modal-footer .btn-primary {
    background-color: var(--color-primary-alt); /* Primary blue for OK button */
    color: var(--color-text-white);
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.modal-footer .btn-primary:hover {
    background-color: var(--color-primary-alt-dark);
    transform: translateY(-1px);
}

.modal-footer .btn-primary:active {
    transform: translateY(0);
}

/* Styling for question media (images/videos/audio) */
.question-media img,
.question-media video,
.question-media audio {
    max-height: 300px; /* Limit height for media */
}

/* Styles for quiz start page */
.quiz-start-page {
    text-align: center;
    padding: 2rem;
}

.quiz-start-page .quiz-thumbnail {
    max-width: 80%;
    height: auto;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.quiz-start-page h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: var(--color-text-white);
}

.quiz-start-page p {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-medium);
}

.quiz-start-page .start-button {
    margin-top: 2rem;
    padding: 0.75rem 2rem;
    font-size: 1.25rem;
    font-weight: bold;
    background-color: var(--color-success-icon); /* Green for start button */
    border-color: var(--color-success-icon);
    color: var(--color-text-white);
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
}

.quiz-start-page .start-button:hover {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.timer-display {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: #4a5568;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text-light);
    min-width: 90px; /* Give it a fixed width to prevent jumpiness */
    text-align: center;
}