/* ==========================================================================
   شريط التقدم والترويسة (Progress & Header)
   ========================================================================== */
.journey-header { 
    background: #fff; padding: 20px; text-align: center; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); display: flex; 
    justify-content: space-between; align-items: center; 
}
.progress-container { 
    width: 100%; max-width: 700px; margin: 20px auto 0; 
    background: #e2e8f0; border-radius: 10px; height: 12px; overflow: hidden; 
}
.progress-bar { 
    height: 100%; background: var(--success-color); 
    width: 0%; transition: width 0.5s ease-in-out; 
}

/* ==========================================================================
   بطاقة الرحلة والخطوات (Journey Card & Steps)
   ========================================================================== */
.journey-card { 
    background: #fff; max-width: 700px; margin: 30px auto; padding: 40px; 
    border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    text-align: center; border-top: 5px solid var(--primary-color); 
    position: relative; min-height: 400px;
}
.step-container { display: none; animation: fadeIn 0.5s; }
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}
.step-icon { font-size: 3rem; margin-bottom: 15px; }
.step-title { font-size: 1.6rem; color: var(--text-color); margin-bottom: 15px; }
.step-content { font-size: 1.2rem; line-height: 1.8; color: var(--text-muted); margin-bottom: 25px; }

/* ==========================================================================
   عناصر التقييم (MCQ, Video, Feedback)
   ========================================================================== */
.video-container { 
    position: relative; padding-bottom: 56.25%; height: 0; 
    border-radius: 12px; overflow: hidden; margin-bottom: 20px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
}
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

.mcq-grid { display: grid; gap: 15px; text-align: right; margin-bottom: 25px; }
.mcq-btn { 
    width: 100%; padding: 15px; font-size: 1.1rem; border: 2px solid #cbd5e1; 
    border-radius: 10px; background: #f8fafc; cursor: pointer; transition: var(--transition); 
    text-align: right; font-family: 'Cairo', sans-serif; font-weight: 600; color: var(--text-color);
}
.mcq-btn:hover { border-color: var(--primary-color); background: var(--primary-light); }

.feedback { display: none; padding: 15px; border-radius: 8px; margin-bottom: 15px; font-weight: bold; font-size: 1.1rem; }
.feedback.error { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.feedback.success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.hint-container { display: none; margin-top: 15px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border: 2px solid #fde68a; background: #fffbeb; padding: 20px; animation: fadeIn 0.5s;}

/* ==========================================================================
   تحسينات السحب والإفلات للجوال (Drag & Drop Mobile Fixes)
   ========================================================================== */
.draggable-word { touch-action: none; z-index: 100; }
.drop-zone.active-target { 
    transform: scale(1.2); 
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); 
    background-color: rgba(59, 130, 246, 0.4) !important; 
    border-color: #2563eb !important; 
    z-index: 50; 
}