body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.quiz-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 80%;
    max-width: 600px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.timer {
    font-size: 24px;
    color: #ff5722;
}

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

.question-text {
    font-size: 18px;
    margin-bottom: 10px;
}

/* --- UPDATED IMAGE RULE FOR CONSISTENCY AND CONTAINMENT --- */
.question-image {
    width: 100%;
    height: 200px; /* Consistent height for the image display area */
    object-fit: contain; /* CRUCIAL: Scales image to fit entirely, preventing cropping */
    display: block;
    margin: 0 auto 10px auto; /* Centers the image and adds bottom margin */
    /* Optional: Add a subtle border or background to emphasize the container */
    border: 1px solid #e0e0e0; 
    border-radius: 4px;
    box-sizing: border-box; 
}
/* --- END UPDATED IMAGE RULE --- */


.options-container {
    display: flex;
    flex-direction: column;
    width: 100%; /* Ensure container uses full width */
}

.option-card {
    background-color: #ffcc80;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Make sure the card takes the full width */
    box-sizing: border-box; /* Include padding in width calculation */
    transition: background-color 0.2s;
}

.option-card:hover {
    background-color: #ffb74d; /* Slightly darker on hover */
}

.option-card.selected {
    background-color: #ffab40;
    font-weight: bold;
}

.option-text {
    font-size: 16px;
    flex: 1; /* Allows the text to take up available space */
}

.tick-icon {
    display: none;
    font-size: 18px;
    color: #4caf50;
    margin-left: 10px; /* Spacing between text and tick */
}

.option-card.selected .tick-icon {
    display: block;
}

.buttons {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

.nav-button {
    background-color: #ff5722;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s, transform 0.1s;
}

.nav-button:hover:not(:disabled) {
    background-color: #e64a19;
    transform: translateY(-1px);
}

.nav-button:disabled {
    background-color: #ffc1a6;
    cursor: not-allowed;
}