/* Common Exercise Styles */
.exercise-container {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
    overflow: hidden;
}

.exercise-header {
    background-color: #f9f7ff;
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
}

.exercise-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4527a0;
    margin-bottom: 0.5rem;
}

.exercise-instructions {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.5;
}

.exercise-content {
    padding: 1.5rem;
}

.exercise-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
}

button.btn-check-answer,
button.btn-check-answers,
button.btn-check-matching,
button.btn-check-translation,
button.btn-reset-matching {
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

button.btn-check-answer,
button.btn-check-answers,
button.btn-check-matching,
button.btn-check-translation {
    background-color: #6200ea;
    color: white;
}

button.btn-check-answer:hover,
button.btn-check-answers:hover,
button.btn-check-matching:hover,
button.btn-check-translation:hover {
    background-color: #5000d0;
    box-shadow: 0 4px 8px rgba(98, 0, 234, 0.2);
}

button.btn-reset-matching {
    background-color: #f5f5f5;
    color: #757575;
}

button.btn-reset-matching:hover {
    background-color: #e0e0e0;
}

.feedback-container {
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: 8px;
    background-color: #f8f9fa;
}

/* Multiple Choice Question Styles */
.question-text {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.options-container {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.option {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background-color: #f5f5f5;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.option:hover {
    background-color: #e9e5fd;
}

.option-input {
    margin-right: 1rem;
    cursor: pointer;
}

.option-label {
    cursor: pointer;
}

.correct-feedback, .incorrect-feedback {
    display: none;
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.correct-feedback {
    background-color: #e6f7e9;
    color: #2e7d32;
}

.incorrect-feedback {
    background-color: #ffebee;
    color: #c62828;
}

.feedback-icon {
    font-size: 1.25rem;
    font-weight: bold;
}

.explanation {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Fill in the Blanks Styles */
.fill-blanks-text {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.blank-input {
    border: none;
    border-bottom: 2px solid #6200ea;
    background-color: #f5f5f5;
    padding: 0.25rem 0.5rem;
    margin: 0 0.25rem;
    font-family: inherit;
    font-size: inherit;
    text-align: center;
}

.blank-input:focus {
    outline: none;
    border-color: #3700b3;
    background-color: #e9e5fd;
}

.blank-input.correct {
    border-color: #2e7d32;
    background-color: #e6f7e9;
}

.blank-input.incorrect {
    border-color: #c62828;
    background-color: #ffebee;
}

.blanks-feedback {
    padding: 1rem;
}

.feedback-summary {
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.feedback-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feedback-item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.feedback-index {
    font-weight: 600;
}

.feedback-incorrect {
    color: #c62828;
}

.feedback-correct {
    color: #2e7d32;
}

/* Matching Exercise Styles */
.matching-columns {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.column-a, .column-b {
    flex: 1;
}

.column-a h4, .column-b h4 {
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #4527a0;
}

.items-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.matching-item {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background-color: #f5f5f5;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
}

.item-a {
    background-color: #e9e5fd;
}

.item-b {
    background-color: #e1f5fe;
}

.matching-item:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.item-index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #6200ea;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: 0.75rem;
}

.matching-connections {
    position: relative;
    min-height: 5rem;
}

/* Short Answer Question Styles */
.answer-container {
    margin-top: 1rem;
}

.answer-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.answer-input:focus {
    outline: none;
    border-color: #6200ea;
}

/* Translation Exercise Styles */
.source-language, .target-language {
    margin-bottom: 1.5rem;
}

.language-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #4527a0;
}

.source-text {
    padding: 1rem;
    background-color: #f5f5f5;
    border-radius: 8px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.translation-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.translation-input:focus {
    outline: none;
    border-color: #6200ea;
}

.translation-feedback {
    padding: 1rem;
}

.feedback-header {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #4527a0;
}

.model-translation-container {
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: #f3e5f5;
    border-radius: 8px;
}

.model-translation-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #4527a0;
}

.feedback-message {
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

.feedback-success {
    background-color: #e6f7e9;
    color: #2e7d32;
}

.feedback-good {
    background-color: #e8f5e9;
    color: #388e3c;
}

.feedback-partial {
    background-color: #fff8e1;
    color: #ff8f00;
}

.feedback-needs-work {
    background-color: #ffebee;
    color: #c62828;
}

.feedback-error {
    background-color: #ffebee;
    color: #c62828;
}

/* Fill In The Blanks - Drag & Drop from options pool styles */
.inline-blank {
    @apply inline-block min-w-[4rem] px-2 py-1 mx-1 border-b-2 border-dashed border-purple-400 cursor-pointer transition-all duration-300 relative rounded-md;
}
.inline-blank:hover {
    @apply border-purple-600 bg-purple-50;
}
.inline-blank.selected {
    @apply border-purple-700 bg-purple-100 shadow-inner ring-2 ring-purple-500;
}
.inline-blank.filled {
    @apply border-solid border-purple-300 bg-purple-50;
}
.inline-blank.correct {
    @apply border-green-500 bg-green-100 text-green-800 font-semibold;
}
.inline-blank.incorrect {
    @apply border-red-500 bg-red-100 text-red-800 font-semibold;
}
.blank-placeholder {
    @apply text-purple-500;
}
.blank-content {
    @apply text-purple-800 font-bold;
}
.option-item {
    @apply px-3 py-1.5 text-sm sm:px-4 sm:py-2 sm:text-base bg-pink-100 text-pink-900 border border-pink-200 rounded-lg font-medium hover:bg-pink-200 transition-all duration-300 cursor-pointer shadow-sm transform hover:scale-105 active:scale-95;
}
.option-item.used {
    @apply bg-gray-300 text-gray-500 cursor-not-allowed opacity-50 hover:scale-100 hover:bg-gray-300;
}
.option-item.available {
    @apply ring-2 ring-purple-400 bg-purple-100 text-purple-800 shadow-lg;
}
.temporary-message {
    @apply fixed top-5 left-1/2 -translate-x-1/2 bg-yellow-100 border border-yellow-400 text-yellow-800 px-6 py-3 rounded-lg shadow-xl z-50 animate-fade-in;
}

/* Added animations for better UX */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
@keyframes success-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}
.animate-shake {
    animation: shake 0.4s ease-in-out;
}
.animate-success {
    animation: success-pulse 0.6s ease-out;
}