/* SportPersonalities Quiz Form Fields Styling */

.sportpersonalities-form-field {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
}

.sportpersonalities-field-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.required {
    color: #e74c3c;
    font-weight: bold;
}

.field-description {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
    font-style: italic;
}

.sportpersonalities-field-input {
    margin-top: 1rem;
}

.sportpersonalities-field-input input[type="text"],
.sportpersonalities-field-input input[type="email"],
.sportpersonalities-field-input input[type="phone"],
.sportpersonalities-field-input input[type="number"],
.sportpersonalities-field-input input[type="url"],
.sportpersonalities-field-input input[type="date"],
.sportpersonalities-field-input textarea,
.sportpersonalities-field-input select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    background: white;
}

.sportpersonalities-field-input input:focus,
.sportpersonalities-field-input textarea:focus,
.sportpersonalities-field-input select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.radio-option,
.checkbox-option {
    display: block;
    margin-bottom: 0.75rem;
    cursor: pointer;
    position: relative;
    padding-left: 2rem;
}

.radio-option input[type="radio"],
.checkbox-option input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
}

.radio-option span,
.checkbox-option span {
    font-size: 1rem;
    color: #333;
}

.binary-options {
    display: flex;
    gap: 2rem;
}

.binary-options .radio-option {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding-left: 0;
}

.binary-options .radio-option input[type="radio"] {
    position: static;
    margin-right: 0.5rem;
    width: auto;
    height: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sportpersonalities-form-field {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .binary-options {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Inline validation error styling */
.sportpersonalities-quiz-question.unanswered {
    border-left: 3px solid #d32f2f;
    background: #ffebee;
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.inline-validation-error {
    color: #d32f2f;
    font-size: 14px;
    margin-top: 8px;
    font-weight: 500;
}