/*
 * Plugin Name: Frida Quiz (Light) Styles
 * Description: Stylesheet for the Frida Quiz plugin.
 * Version: 1.0
 */

/* General quiz container styles */
.frida-quiz-root {
    font-family: Arial, sans-serif;
}

/* Question section container */
.frida-question {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px dashed #cccccc;
    border-radius: 8px;
}

/* Question title */
.frida-question legend {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
}

/* Style for the image included in the question */
.frida-quiz-image img {
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Style for the paragraph after options */
.frida-quiz-post-text {
    font-size: 0.9em;
    color: #6a6a6a;
}

/* Contact form and result area */
#frida-result,
#frida-contact {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Contact form input styling */
#frida-name,
#frida-email {
    padding: 8px;
    box-sizing: border-box;
}

/* 5. Validation error styling */
.frida-error-field {
    border: 2px solid red !important;
}

.error-icon {
    margin-left: 5px;
    font-size: 1.1em;
    vertical-align: middle;
}