/* style.css for Veterinary Quiz Plugin */

#quiz-config-form {
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    background-color: #ffffff !important;
    padding: 25px 15px !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
}

#quiz-config-form label {
    display: block !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin-bottom: 8px !important;
    color: #2c3e50 !important;
}

#quiz-config-form select,
#quiz-config-form input[type="number"] {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

#quiz-config-form select:focus,
#quiz-config-form input[type="number"]:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25) !important;
    outline: none !important;
}

#quiz-config-form button {
    padding: 14px 28px !important;
    background-color: #007bff !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out !important;
}

#quiz-config-form button:hover {
    background-color: #0056b3 !important;
    transform: translateY(-2px) !important;
}

#quiz-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 999 !important;
}

#quiz-overlay.active {
    display: block !important;
}

.modal-popup {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    background-color: #ffffff !important;
    padding: 0 !important;
    z-index: 1000 !important;
}

.modal-popup.active {
    display: block !important;
}

.close-modal {
    position: fixed !important;
    top: 5px !important;
    right: 15px !important;
    width: 40px !important;
    height: 40px !important;
    background-color: #dc3545 !important; /* Red background */
    color: #fff !important; /* White icon */
    font-size: 22px !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 85% !important; /* Rounded corners */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    transition: background-color 0.25s ease, transform 0.15s ease !important;
    z-index: 1005 !important;
}

.close-modal:hover {
    background-color: #b02a37 !important; /* Darker red on hover */
    transform: scale(1.1) !important;
}


#quiz-container {
    display: none !important;
    padding-bottom: 80px !important; /* Ensure submit button is visible above pagination */
}

#quiz-container.active {
    display: block !important;
}

#quiz-container .content {
    padding: 30px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

#results-container {
    display: none !important;
}

#results-container.active {
    display: block !important;
}

#results-container .content {
    padding: 30px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

#error-popup {
    display: none !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important; /* let content decide width */
    max-width: 500px !important;
    background-color: #f8d7da !important;
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    z-index: 1001 !important;
    text-align: center !important;
    height: auto !important; /* <— ensures popup only grows with content */
    max-height: none !important; /* <— prevents stretching to full height */
}

#error-popup.active {
    display: block !important;
}

#error-text {
    font-size: 18px !important;
    color: #721c24 !important;
    margin-bottom: 15px !important;
}

#error-popup button {
    padding: 10px 20px !important;
    background-color: #007bff !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: background-color 0.2s ease-in-out !important;
}

#error-popup button:hover {
    background-color: #0056b3 !important;
}

#timer {
    position: sticky !important; /* Sticky to stay at top of content without overlaying */
    top: 1px !important; /* Stick to top of quiz-container */
    left: 15px !important; /* Align to left */
    font-size: 1.4em !important;
    text-align: center !important;
    color: #dc3545 !important;
    font-weight: 600 !important;
    background-color: #fff3cd !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    z-index: 1002 !important; /* Above questions but not overlaying */
    margin-bottom: 15px !important; /* Space below timer */
}

#questions {
    margin-top: 60px !important; /* Ensure questions start below the sticky timer */
}

#motivational-quote {
    background-color: #e9ecef !important;
    padding: 15px !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    font-style: italic !important;
    font-size: 16px !important;
    color: #495057 !important;
    text-align: center !important;
}

.question {
    margin-bottom: 25px !important;
    padding: 20px !important;
    border: 1px solid #e9ecef !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    transition: box-shadow 0.2s ease-in-out !important;
}

.question:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* === Enlarge Question Text and Number === */
.question p {
    font-size: 22px !important;      /* Increase question text size */
    line-height: 1.6 !important;
    color: #1a1a1a !important;
}

.question p strong {
    font-size: 24px !important;      /* Increase 'Question 2:' part */
    color: #000000 !important;
}

.mcq-options {
    list-style: none !important;
    padding: 0 !important;
    margin: 15px 0 !important;
}

.mcq-options li {
    margin: 12px 0 !important;
    display: flex !important;
    align-items: center !important;
}

.mcq-options li label {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    font-size: 16px !important;
    color: #495057 !important;
    width: 100% !important;
    padding: 10px !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease-in-out !important;
}

.mcq-options li label:hover {
    background-color: #f1f3f5 !important;
}

.mcq-options li input[type="radio"] {
    margin-right: 10px !important;
    width: 18px !important;
    height: 18px !important;
}



#submit-quiz {
    padding: 14px 28px !important;
    background-color: #28a745 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    display: block !important;
    margin: 20px auto !important;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out !important;
}

#submit-quiz:hover {
    background-color: #218838 !important;
    transform: translateY(-2px) !important;
}

#results-content {
    margin-top: 30px !important;
}

#results-content h2 {
    color: #2c3e50 !important;
    font-size: 1.8em !important;
    margin-bottom: 20px !important;
}

#results-content h3 {
    color: #343a40 !important;
    font-size: 1.4em !important;
    margin-top: 20px !important;
}

#results-content .question-result {
    margin-bottom: 20px !important;
    padding: 15px !important;
    border-radius: 8px !important;
}

#results-content .question-result.incorrect {
    background-color: #f8d7da !important;
}

#results-content .question-result.correct {
    background-color: #d4edda !important;
}

#results-content .question-result.skipped {
    background-color: #e2e3e5 !important;
}

#results-content .question-result.unanswered {
    background-color: #fff3cd !important;
}

#results-content p {
    font-size: 16px !important;
    color: #495057 !important;
    margin: 10px 0 !important;
}

#quiz-summary {
    background-color: #e9ecef !important;
    padding: 15px !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
}

.pagination {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    padding: 15px !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 1001 !important;
}

.pagination button {
    padding: 10px 16px !important;
    background-color: #007bff !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out !important;
    flex-shrink: 0 !important;
}

.pagination button:hover {
    background-color: #0056b3 !important;
    transform: translateY(-2px) !important;
}

.pagination .page-btn {
    background-color: #e9ecef !important;
    color: #2c3e50 !important;
}

.pagination .page-btn.current {
    background-color: #007bff !important;
    color: #ffffff !important;
}

.pagination .page-btn[style*="color: red"] {
    background-color: #fff1f1 !important;
    color: #dc3545 !important;
}

.pagination .page-btn:hover {
    background-color: #dee2e6 !important;
}

.pagination .page-btn[style*="color: red"]:hover {
    background-color: #f8d7da !important;
}

.pagination span {
    margin: 0 15px !important;
    font-size: 1.2em !important;
    color: #2c3e50 !important;
    flex-shrink: 0 !important;
}

#login-prompt {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    padding: 15px !important;
    border-radius: 6px !important;
    margin-bottom: 20px !important;
    font-size: 16px !important;
    text-align: center !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #quiz-config-form {
        padding: 15px 10px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    #quiz-container .content,
    #results-container .content {
        padding: 20px !important;
    }

    #quiz-config-form select,
    #quiz-config-form input[type="number"] {
        font-size: 14px !important;
    }

    #quiz-config-form button,
    #submit-quiz {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    .question {
        padding: 15px !important;
    }

    .pagination button {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .pagination span {
        font-size: 1em !important;
    }

    #motivational-quote {
        font-size: 14px !important;
    }

   

    #questions {
        margin-top: 50px !important; /* Adjusted for smaller screens */
    }
}